使用不包含 Scaffold 的上下文调用 Scaffold.of()

Question

如您所见，我的按钮位于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 小部件中。不过，返回 Scaffold 的小部件应该是有状态的小部件。

 _scaffoldKey.currentState.showSnackBar(snackbar); 

Answer 1

发生此异常是因为您正在使用实例化Scaffold 的小部件的context。不是Scaffold 的孩子的context。

你可以通过使用不同的上下文来解决这个问题：

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重构）

Answer 2

您可以使用GlobalKey。唯一的缺点是使用 GlobalKey 可能不是最有效的方法。

这样做的好处是您还可以将此密钥传递给其他不包含任何脚手架的自定义小部件类。见(here)

class HomePage extends StatelessWidget {
  final _scaffoldKey = GlobalKey<ScaffoldState>(); \\ new line
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,                           \\ new line
      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?'));
    _scaffoldKey.currentState.showSnackBar(snackBar);   \\ edited line
  }
}

Answer 3

你可以通过两种方式解决这个问题：

1) 使用 Builder 小部件

Scaffold(
    appBar: AppBar(
        title: Text('My Profile'),
    ),
    body: Builder(
        builder: (ctx) => RaisedButton(
            textColor: Colors.red,
            child: Text('Submit'),
            onPressed: () {
                 Scaffold.of(ctx).showSnackBar(SnackBar(content: Text('Profile Save'),),);
            }               
        ),
    ),
);

2) 使用 GlobalKey

class HomePage extends StatelessWidget {
  
  final globalKey = GlobalKey<ScaffoldState>();
  
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       key: globalKey,
       appBar: AppBar(
          title: Text('My Profile'),
       ),
       body:  RaisedButton(
          textColor: Colors.red,
          child: Text('Submit'),
          onPressed: (){
               final snackBar = SnackBar(content: Text('Profile saved'));
               globalKey.currentState.showSnackBar(snackBar);
          },
        ),
     );
   }
}

Answer 4

更新 - 2021

Scaffold.of(context) 被ScaffoldMessenger 取代。

从方法的文档中检查：

ScaffoldMessenger 现在处理 SnackBars 以便在 路线并始终显示在当前脚手架上。默认情况下，一个 ScaffoldMessenger 包含在 MaterialApp 中，但您可以 为 ScaffoldMessenger 创建您自己的受控范围，以进一步 控制哪些 Scaffolds 接收您的 SnackBar。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Demo')
    ),
    body: Builder(
      // Create an inner BuildContext so that the onPressed methods
      // can refer to the Scaffold with Scaffold.of().
      builder: (BuildContext context) {
         return Center(
          child: RaisedButton(
            child: Text('SHOW A SNACKBAR'),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Hello!'),
              ));
            },
          ),
        );
      },
    ),
  );
}

您可以查看详细的弃用和新方法here：

Answer 5

解决此问题的简单方法是使用以下代码为您的脚手架创建一个密钥，如下所示：

第一：GlobalKey<ScaffoldState>() _scaffoldKey = GlobalKey<ScaffoldState> ();

第二步：将密钥分配给您的脚手架key: _scaffoldKey

第三：调用 Snackbar 使用 _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Welcome")));

Answer 6

2021 年 3 月 3 日更新：Flutter 2.0 刚刚发布...

（作为历史价值，我也让我的原始答案更进一步......）

---

现在...输入...

ScaffoldMessenger

从the docu我们读到

Scaffold 中的 SnackBar API 现在由 ScaffoldMessenger 处理，其中一个默认情况下在 MaterialApp 的上下文中可用

所以，现在使用全新的ScaffoldMessenger，您将能够编写类似

的代码

Scaffold(
  key: scaffoldKey,
  body: GestureDetector(
    onTap: () {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: const Text('snack'),
        duration: const Duration(seconds: 1),
        action: SnackBarAction(
          label: 'ACTION',
          onPressed: () { },
        ),
      ));
    },
    child: const Text('SHOW SNACK'),
  ),
);

现在，再次在文档中我们可以看到

在过渡期间呈现 SnackBar 时，SnackBar 将完成一个 Hero 动画，平滑地移动到下一页。

ScaffoldMessenger 创建一个范围，所有后代 Scaffold 都在其中注册以接收 SnackBar，这就是它们在这些转换中持续存在的方式。使用 MaterialApp 提供的根 ScaffoldMessenger 时，所有后代 Scaffold 都会收到 SnackBar，除非在树的更下方创建新的 ScaffoldMessenger 范围。通过实例化您自己的 ScaffoldMessenger，您可以控制哪些 Scaffold 接收 SnackBar，哪些不基于您的应用程序的上下文。

---

原始答案

您正在经历的行为甚至在 Flutter documentation987654323@ 中被称为“棘手案例”。

如何修复

您可以从此处发布的其他答案中看到，该问题以不同的方式得到解决。例如，我参考的文档通过使用 Builder 来解决问题

一个内部的BuildContext 以便onPressed 方法可以引用Scaffold 和Scaffold.of()。

因此，从 Scaffold 调用 showSnackBar 的方法是

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Demo')),
    body: Builder(
      builder: (BuildContext innerContext) {
        return FlatButton(
          child: Text('BUTTON'),
          onPressed: () {
            Scaffold.of(innerContext).showSnackBar(SnackBar(
              content: Text('Hello.')
            ));
          }
        );
      }
    )
  );
}

现在为好奇的读者提供一些细节

我自己发现通过简单地 (Android Studio) 将光标设置在一段代码 (Flutter 类、方法等）并按 ctrl+B 以显示该特定部分的文档。

BuildContext 的文档中提到了您面临的特定问题，可以在哪里阅读

每个小部件都有自己的 BuildContext，它成为由 [...].build 函数返回的小部件的父级。

因此，这意味着在我们的例子中，context将是我们的 Scaffold 小部件在创建时（！）的父级。此外，Scaffold.of 的文档说它返回

包含给定上下文的此类最近的 [Scaffold] 实例的状态。

但在我们的例子中，context 没有（还）包含 Scaffold（它还没有被构建）。 Builder 开始行动了！

文档再次照亮了我们。在那里我们可以阅读

[Builder 类，简单的说] 一个柏拉图式的小部件，它调用一个闭包来获取它的子小部件。

嘿，等一下，什么！？好的，我承认：这并没有多大帮助......但足以说明（跟随another SO thread）

Builder 类的目的只是构建和返回子小部件。

现在一切都清楚了！通过在 Scaffold 中调用 Builder，我们正在构建 Scaffold，以便能够获得它自己的上下文，并且有了那个 innerContext，我们终于可以调用 Scaffold.of(innerContext)

上面代码的注释版本如下

@override
Widget build(BuildContext context) {
  // here, Scaffold.of(context) returns null
  return Scaffold(
    appBar: AppBar(title: Text('Demo')),
    body: Builder(
      builder: (BuildContext innerContext) {
        return FlatButton(
          child: Text('BUTTON'),
          onPressed: () {
            // here, Scaffold.of(innerContext) returns the locally created Scaffold
            Scaffold.of(innerContext).showSnackBar(SnackBar(
              content: Text('Hello.')
            ));
          }
        );
      }
    )
  );
}

Answer 7

从 Flutter 版本 1.23-18.1.pre 开始，您可以使用 ScaffoldMessenger

final mainScaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext) {
    return MaterialApp(
      ...
      scaffoldMessengerKey: mainScaffoldMessengerKey
      ...
    );
  }
}

应用程序内部的某处：

mainScaffoldMessengerKey.currentState.showSnackBar(Snackbar(...));

Answer 8

使用ScaffoldMessenger（推荐）

var snackBar = SnackBar(content: Text('Hi there'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);

---

示例（没有Builder 或GlobalKey）

Scaffold(
  body: ElevatedButton(
    onPressed: () {
      var snackBar = SnackBar(content: Text('Hello World'));
      ScaffoldMessenger.of(context).showSnackBar(snackBar);
    },
    child: Text('Show SnackBar'),
  ),
)

Answer 9

更有效的解决方案是将构建功能拆分为多个小部件。 这引入了一个“新上下文”，您可以从中获得 Scaffold

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Scaffold.of example.')),
        body: MyScaffoldBody(),
      ),
    );
  }
}

class MyScaffoldBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
          child: Text('Show a snackBar'),
          onPressed: () {
            Scaffold.of(context).showSnackBar(
              SnackBar(
                content: Text('Have a Snack'),
              ),
            );
          }),
    );
  }
}

Answer 10

我不会费心使用默认的snackbar，因为您可以导入flushbar包，这可以实现更大的可定制性：

https://pub.dev/packages/flushbar

例如：

Flushbar(
                  title:  "Hey Ninja",
                  message:  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
                  duration:  Duration(seconds: 3),              
                )..show(context);

Answer 11

我可能会迟到。但这也会帮助某人。 在 Scaffold 下添加 _key。 然后使用那个 _key 调用 openDrawer 方法。

return Scaffold(
  key: _scaffoldKey, //this is the key
  endDrawer: Drawer(),
  appBar: AppBar( 
//all codes for appbar here
actions: [
IconButton(
        splashRadius: 20,
        icon: Icon(Icons.settings),
        onPressed: () {
          _scaffoldKey.currentState.openEndDrawer(); // this is it
       
        },
      ),]

Answer 12

提取将显示小吃栏的按钮小部件。

class UsellesslyNestedButton extends StatelessWidget {
  const UsellesslyNestedButton({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        showDefaultSnackbar(context);
                    },
                    color: Colors.blue,
                    child: Text('Show about'),
                  );
  }
}

Answer 13

这里我们使用构建器来包装另一个需要小吃栏的小部件

Builder(builder: (context) => GestureDetector(
    onTap: () {
        Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Your Services have been successfully created Snackbar'),
        ));
        
    },
    child: Container(...)))

Answer 14

           Expanded(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: Builder(
                  builder: (context) => RaisedButton(
                    onPressed: () {
                        final snackBar = SnackBar(
                          content: Text("added to cart"),
                           action: SnackBarAction(
                            label: 'Undo',
                             onPressed: () {
                              // Some code to undo the change.
                            },
                          ),
                        );
                    },
                    textColor: Colors.white,
                    color: Colors.pinkAccent,
                    child: Text("Add To Cart",
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w600)),
                  ),
                ),
              ),
            )

Answer 15

也许这段代码有解决办法。

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("SnackBar Message")));

Answer 16

试试这个代码：

Singleton.showInSnackBar(
    Scaffold.of(context).context, "Theme Changed Successfully");
// Just use Scaffold.of(context) before context!!