Question

我正在Flutter中创建登录表单，并且我想使用小吃栏在登录失败时显示消息。我读了这个documentation，如果我有这段代码应该可以使用

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

但是返回此错误

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

我的 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
          ],
        ),
      ),
    );
  }
}

支架返回错误，但是我不知道如何在不重写所有代码的情况下解决此问题。

所以问题是：登录失败时如何显示小吃栏并避免此错误？为什么会出现此错误？

已更新

  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;
  }

在启动页面时如何显示小吃栏？

Answer 1

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

您可以通过创建将接收正确上下文的方法构建器来纠正错误：

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),
                    .....
                ]
            ),
        ),
    ),
);

或者只需将登录按钮提取到其自己的Widget中，而无需更改任何其他代码，它将收到适当的上下文。

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)),
            ),
         ),
      );
    }
}

无法在Flutter登录中显示小吃店

1 个答案: