dart - Flutter で SnackBar を表示する

Question

Flutterのステートフルウィジェット内にシンプルな SnackBarを表示したいと考えています。私のアプリケーションは、 MyHomePageというステートフルウィジェットを使用してMaterialAppの新しいインスタンスを作成します。

showSnackBar() メソッドで SnackBar を表示しようとしています。しかし、「The method 'showSnackBar' was called on null 」で失敗します。

このコードの何が問題になっていますか?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    showInSnackBar("Some text");
  }

  @override
  Widget build(BuildContext context) {
    return new Padding(
            key: _scaffoldKey,
            padding: const EdgeInsets.all(16.0),
            child: new Text("Simple Text")
    );
  }

  void showInSnackBar(String value) {
    _scaffoldKey.currentState.showSnackBar(new SnackBar(
        content: new Text(value)
    ));
  }
}

解決：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: new Scaffold(body: new MyHomePage()),
      );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    showInSnackBar("Some text");
    return new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Scaffold(
          body: new Text("Simple Text")
        )
    );
  }

  void showInSnackBar(String value) {
    Scaffold.of(context).showSnackBar(new SnackBar(
        content: new Text(value)
    ));
  }
}

score 71 · Accepted Answer

私の場合、私はこのようなコードを持っていました(クラス状態で)

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

void showInSnackBar(String value) {
    _scaffoldKey.currentState.showSnackBar(new SnackBar(content: new Text(value)));
}

しかし、足場のキーをセットアップしませんでした。だから私はキーを追加すると: _scaffoldKey

 @override
 Widget build(BuildContext context) {
  return new Scaffold(
    key: _scaffoldKey,
    body: new SafeArea(

スナックバーが働き始めます:)

score 49 · Accepted Answer

3つの問題があります。1 つ目は、Scaffold がどこにもないことです。Scaffold ウィジェットは、スナックバーを表示する方法を知っているウィジェットです。2 つ目は、足場を手に入れるための鍵を持っているが、代わりにそれを Padding に配置したことです (そして、Paddings はスナックバーの知識がありません)。3 つ目は、ビルドの前に initState が呼び出されるため、関連付けられているウィジェットが初期化される前にキーを使用したことです。

最も簡単な解決策はhome、MyApp ウィジェットの行を次のように変更することです。

home: new Scaffold(body: new MyHomePage()),

...そして、のすべての言及を削除し_scaffoldKey、代わりにScaffold.of(context)現在持っている場所を使用します_scaffoldKey.currentState。

score 4 · Accepted Answer

これは、3 つの簡単な手順で行うことができます。

足場の鍵を持っていることを確認してください。以下のコードを記述して作成できます。
```
final _scaffoldKey = GlobalKey<ScaffoldState>();
```

2.ここで、scaffold 内に以下の行を記述して、Scaffold 内でこのキーに言及する必要があります。

key:_scaffoldKey,

次のように記述して、snackbar を表示できます。

final snackBar=SnackBar(
                      content: Text('Your password has been changed successfully'),
                    );
                    _scaffoldKey.currentState.showSnackBar(snackBar);

score 3 · Accepted Answer

ScaffoldState は非推奨になりました。ScaffoldMessengerState を使用します。

上記のソリューションはすべて素晴らしいですが、現在は非推奨になっているため、この方法で使用する必要があります。

    var snackBar = SnackBar(content: Text('Hello World'));

    ScaffoldMessenger.of(_scaffoldKey.currentContext)
    .showSnackBar(snackBar );

score 2 · Accepted Answer

Scaffold.Of(context)スナックバーを表示するために廃止されました。

新しい方法を使用します。

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

ScaffoldMessenger.of(context).showSnackBar(snackBar);

https://flutter.dev/docs/cookbook/design/snackbars

score 1 · Accepted Answer

Flutter で SnackBar を表示する

 ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                                  content: Text('Please Enter Valid Data'),
                                  backgroundColor: Colors.red,
                                ));

例：

 if(value.isNotEmpty && value != null){
 ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                                  content: Text('Validated Successfully'),
                                  backgroundColor: Colors.green,
                                ));
}else{
 ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                                  content: Text('Please Enter Valid Data'),
                                  backgroundColor: Colors.red,
                                ));
}

score -1 · Accepted Answer

ヌル安全バージョンでは--

class _testPageState extends State<testPage> {

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

        home: SizedBox(
            child: Scaffold(

                key: _scaffoldKey,

                body: Center(
                    child: RaisedButton(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      onPressed: () {

                        final snackBar = SnackBar(content: Text('Your Text'));    
                        _scaffoldKey.currentState!.showSnackBar(snackBar);

                      },

                      child: Text("Show SB"),
                    )
                )
            )
        )
    );
  }
}

dart - Flutter で SnackBar を表示する

16 に答える 16

Related

Reference