我在 flutter 中创建了一个登录表单，我想使用 snackbar 在登录失败时显示一条消息。我读了这个documentation如果我有这段代码应该可以工作

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

但是返回这个错误

Scaffold.of() called with a context that does not contain a Scaffold.

我的login.dart所有代码

import 'package:flutter/material.dart';
import 'package:fluttercrud/screens/home_page.dart';

class LoginPage extends StatelessWidget {
  static String tag = 'login-page';

  @override
  Widget build(BuildContext context) {
    final logo = Hero(
      tag: 'hero',
      child: CircleAvatar(
        backgroundColor: Colors.transparent,
        radius: 48.0,
        child: Image.asset('assets/logo.png'),
      ),
    );

    final email = TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      decoration: InputDecoration(
        hintText: 'Usuario',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final password = TextFormField(
      autofocus: false,
      obscureText: true,
      decoration: InputDecoration(
        hintText: 'Contraseña',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final loginButton = 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);
           //Navigator.of(context).pushNamed(HomePage.tag);
          },
          color: Colors.blue[300],
          child: Text('Entrar', style: TextStyle(color: Colors.white)),
        ),
      ),
    );

    final forgotLabel = FlatButton(
      child: Text(
        '¿Contraseña olvidada?',
        style: TextStyle(color: Colors.black),
      ),
      onPressed: () {},
    );

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          children: <Widget>[
            logo,
            SizedBox(height: 48.0),
            email,
            SizedBox(height: 8.0),
            password,
            SizedBox(height: 24.0),
            loginButton,
            forgotLabel
          ],
        ),
      ),
    );
  }
}

脚手架返回一个错误，但我不知道如何在不重写所有代码的情况下解决这个问题。

那么问题来了:如何在登录失败时显示snackbar并避免这个错误？为什么会出现这个错误？

已更新

  void initState() {
    super.initState();
      final snackBar = SnackBar(
                 content: Text(
                'Usuario/Contraseña incorrecto',
                textAlign: TextAlign.center,
              ));
             Scaffold.of(context).showSnackBar(snackBar);
    seriesList = _createSampleData();
    animate = false;
  }

我怎样才能在初始页面显示 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)),
            ),
         ),
      );
    }
}

关于dart - 无法在 flutter 登录中显示 snackbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53242051/