web-dev-qa-db-ja.com

オートフォーカスでテキストフィールドを使用するとFlutterがエラーをスローする

FlutterでTextFieldウィジェットを使用し、適切な値autoFocusをtrueに設定すると、

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TextField(
          autofocus: true,
        ),
      ),
    );
  }
}

フラッターはエラーをスローします

I/flutter (31721): ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════
I/flutter (31721): The following assertion was thrown while dispatching notifications for FocusNode:
I/flutter (31721): RenderBox was not laid out: RenderEditable#bf516 NEEDS-LAYOUT NEEDS-Paint
I/flutter (31721): 'package:flutter/src/rendering/box.Dart':
I/flutter (31721): Failed assertion: line 1687 pos 12: 'hasSize'
I/flutter (31721):
I/flutter (31721): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (31721): more information in this error message to help you determine and fix the underlying cause.
I/flutter (31721): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (31721):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (31721):
I/flutter (31721): When the exception was thrown, this was the stack:
I/flutter (31721): #2      RenderBox.size 
package:flutter/…/rendering/box.Dart:1687
I/flutter (31721): #3      EditableTextState._updateSizeAndTransform 
package:flutter/…/widgets/editable_text.Dart:1729
I/flutter (31721): #4      EditableTextState._openInputConnection 
package:flutter/…/widgets/editable_text.Dart:1415
I/flutter (31721): #5      EditableTextState._openOrCloseInputConnectionIfNeeded 
package:flutter/…/widgets/editable_text.Dart:1441
I/flutter (31721): #6      EditableTextState._handleFocusChanged 
package:flutter/…/widgets/editable_text.Dart:1707
I/flutter (31721): #7      ChangeNotifier.notifyListeners 
package:flutter/…/foundation/change_notifier.Dart:206
I/flutter (31721): #8      FocusNode._notify 
package:flutter/…/widgets/focus_manager.Dart:808
I/flutter (31721): #9      FocusManager._applyFocusChange 
package:flutter/…/widgets/focus_manager.Dart:1401
I/flutter (31721): (elided 12 frames from class _AssertionError and package Dart:async)
I/flutter (31721):
I/flutter (31721): The FocusNode sending notification was:
I/flutter (31721):   FocusNode#ce6fe
I/flutter (31721): ════════════════════════════════════════════════════════════════════════════════════════════════════

なぜ、そしてどうすればこの問題を解決できますか？.

私のフラッターバージョン：

[√] Flutter（チャネル安定、v1.12.13 + hotfix.5、Microsoft Windows [バージョン10.0.18362.535]、ロケールen-US）[√] Androidツールチェーン-Androidデバイス用に開発（ Android SDKバージョン29.0.2）[√] Android Studio（バージョン3.5）[√] VS Code（バージョン1.41.0）[√]接続デバイス（1つ利用可能）•問題は見つかりませんでした！

================================================== ======================

flutterinputdarttextfield
4
josef atef

この問題は公式の例にも存在します https://flutter.dev/docs/cookbook/forms/focus
オートフォーカスがあるため、キーボードが最初に表示されますが、テキストフィールドはまだ存在しません
回避策はFocusNodeとWidgetsBinding.instance.addPostFrameCallbackを使用することです
TextFieldが表示され、フォーカスがこのTextFieldに移動したとき

コードスニペット

@override
  void initState(){
    super.initState();
    myFocusNode = FocusNode();
    WidgetsBinding.instance.addPostFrameCallback((_){
      FocusScope.of(context).requestFocus(myFocusNode);
    });
  }

完全なコード

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  FocusNode myFocusNode;

  @override
  void initState(){
    super.initState();
    myFocusNode = FocusNode();
    WidgetsBinding.instance.addPostFrameCallback((_){
      FocusScope.of(context).requestFocus(myFocusNode);
    });
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    myFocusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TextField(
          //autofocus: true,
          focusNode: myFocusNode,
        ),
      ),
    );
  }
}
7
chunhunghan

このバグは修正されましたが、まだ修正は安定版チャネルにはありません（ https://github.com/flutter/flutter/issues/52221 ）。プロジェクトで許可されている場合は、開発チャネル（> 1.15）に切り替えて、オートフォーカスを使用できます。

コマンドラインから：

flutter channel dev
flutter upgrade

プロジェクトを再構築すると、機能するはずです。

1
moldstadt