Dart Can´；t在flatter登录中显示snackbar

我正在用flatter创建一个登录表单，我想用snackbar在登录失败时显示一条消息。我读了这个，如果我有这个代码应该工作

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
Scaffold.of(context).showSnackBar(snackBar);

但是返回这个错误

使用不包含脚手架的上下文调用Scaffold.of（）

我的login.dart所有代码

---

在初始化页面时如何显示snackbar？

这是因为您使用的是创建脚手架的小部件的上下文（父上下文），而不是脚手架本身的上下文。这就是错误

您可以通过创建将接收正确上下文的方法生成器来修复错误：

Widget _buildLoginButton(BuildContext context) {
    return Padding(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        child: Material(
        borderRadius: BorderRadius.circular(30.0),
        child: MaterialButton(
            minWidth: 200.0,
            height: 42.0,
            onPressed: () {
                final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
                Scaffold.of(context).showSnackBar(snackBar);
            },
            color: Colors.blue[300],
            child: Text('Entrar', style: TextStyle(color: Colors.white)),
        ),
     ),
  );
}

并重构页面以使用刚才创建的生成器方法：

Scaffold(
    appBar: AppBar(
        title: Text('My Page'),
    ),
    body: Builder(
        builder: (context) => 
            Column(
                children: [
                    .....
                    _buildLoginButton(context),
                    .....
                ]
            ),
        ),
    ),
);

或者只需将登录按钮提取到它自己的小部件中，而不更改任何其他代码，它就会收到正确的上下文

class LoginButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Padding(
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: Material(
            borderRadius: BorderRadius.circular(30.0),
            child: MaterialButton(
                minWidth: 200.0,
                height: 42.0,
                onPressed: () {
                    final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
                    Scaffold.of(context).showSnackBar(snackBar);
                },
                color: Colors.blue[300],
                child: Text('Entrar', style: TextStyle(color: Colors.white)),
            ),
         ),
      );
    }
}

---

这是因为您使用的是创建脚手架的小部件的上下文（父上下文），而不是脚手架本身的上下文。这就是错误

您可以通过创建将接收正确上下文的方法生成器来修复错误：

Widget _buildLoginButton(BuildContext context) {
    return Padding(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        child: Material(
        borderRadius: BorderRadius.circular(30.0),
        child: MaterialButton(
            minWidth: 200.0,
            height: 42.0,
            onPressed: () {
                final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
                Scaffold.of(context).showSnackBar(snackBar);
            },
            color: Colors.blue[300],
            child: Text('Entrar', style: TextStyle(color: Colors.white)),
        ),
     ),
  );
}

并重构页面以使用刚才创建的生成器方法：

Scaffold(
    appBar: AppBar(
        title: Text('My Page'),
    ),
    body: Builder(
        builder: (context) => 
            Column(
                children: [
                    .....
                    _buildLoginButton(context),
                    .....
                ]
            ),
        ),
    ),
);

或者只需将登录按钮提取到它自己的小部件中，而不更改任何其他代码，它就会收到正确的上下文

class LoginButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Padding(
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: Material(
            borderRadius: BorderRadius.circular(30.0),
            child: MaterialButton(
                minWidth: 200.0,
                height: 42.0,
                onPressed: () {
                    final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
                    Scaffold.of(context).showSnackBar(snackBar);
                },
                color: Colors.blue[300],
                child: Text('Entrar', style: TextStyle(color: Colors.white)),
            ),
         ),
      );
    }
}

---

你能举例说明提取is小部件上的按钮吗？@ElHombreSinNombre基本上是创建新的无状态小部件，我已经更新了我的答案我更新了我的问题。您的回答是正确的，我进行了测试，但我需要在init方法上显示snackbar。@ElHombreSinNombre在init期间还没有小部件树，它要求您有一个小部件树才能找到scaffold，在呈现脚手架时，必须首先为其分配一个全局键，并在引用该全局键的init方法中延迟调用脚手架：void initState（）{super.initState（）；Future.delayed（持续时间（秒数：1））。然后（（）=>_displaySnackbar）；}void get _displaySnackbar{u scaffoldKey.currentState.showSnackBar（SnackBar（持续时间：持续时间（分钟：1），内容：Text（“您的SnackBar消息”）；}我尝试了你的代码，但有些东西失败了。你能编写示例吗？Return“method showsnackbar被调用为null”你能在is小部件上提取按钮吗？@ElHombreSinNombre基本上创建了一个新的无状态小部件，我更新了我的答案我更新了我的问题。你的答案是正确的，我进行了测试，但我需要在init方法上显示snackbar。@ElHombreSinNombre在初始化期间还没有小部件树，并且它要求您拥有一个小部件树。为了找到脚手架，您必须在脚手架呈现时首先为其分配一个全局键，并在引用该全局键的初始化方法中延迟调用脚手架：void initState（）{super.initState（）；Future.delayed（Duration（秒数：1））。然后（（（u）=>\ u displaySnackbar）；}void get\u displaySnackbar{{u scaffoldKey.currentState.showSnackBar（SnackBar（duration:duration（分钟数：1），content:Text（'yoursnackbar message'））；}我尝试了你的代码，但失败了。你能编写示例代码吗？Return'method showSnackBar是在null上调用的'