☰

Scaffold.of() が Scaffold を含まないコンテキストで呼び出されました 質問する

tag-icon • tag-icon flutter dart snackbar scaffold
Scaffold.of() が Scaffold を含まないコンテキストで呼び出されました 質問する

ご覧のとおり、ボタンはScaffoldの本体内にあります。しかし、次の例外が発生します:

Scaffold を含まないコンテキストで Scaffold.of() が呼び出されました。

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar Playground'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.pink,
          textColor: Colors.white,
          onPressed: _displaySnackBar(context),
          child: Text('Display SnackBar'),
        ),
      ),
    );
  }
}

_displaySnackBar(BuildContext context) {
  final snackBar = SnackBar(content: Text('Are you talkin\' to me?'));
  Scaffold.of(context).showSnackBar(snackBar);
}

編集：

Scaffoldこの問題の別の解決策を見つけました。に というキーを与えるとGlobalKey<ScaffoldState>、ウィジェット内で本体をラップする必要なく、次のように SnackBar を表示できますBuilder。 ただし、 を返すウィジェットはScaffoldStateful ウィジェットである必要があります。

 _scaffoldKey.currentState.showSnackBar(snackbar);

ベストアンサー1

contextこの例外は、 をインスタンス化したウィジェットの を使用しているために発生しますScaffold。contextの子の ではありませんScaffold。

別のコンテキストを使用するだけでこれを解決できます。

Scaffold(
    appBar: AppBar(
        title: Text('SnackBar Playground'),
    ),
    body: Builder(
        builder: (context) => 
            Center(
            child: RaisedButton(
            color: Colors.pink,
            textColor: Colors.white,
            onPressed: () => _displaySnackBar(context),
            child: Text('Display SnackBar'),
            ),
        ),
    ),
);

ここで を使用していますがBuilder、これが異なる を取得する唯一の方法ではないことに注意してくださいBuildContext。

サブツリーを別のものに抽出することも可能ですWidget（通常はextract widgetリファクタリングを使用）。

おすすめ記事