Myujth

Im creating a login form in flutter and I want to use snackbar to show a message when login fails. I read this documentation and if i have this code should works

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

But return this error

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

My login.dart all code

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

The scaffold return a error but i don´t know how can i fix this without rewrite all code.

So the question is: How can i to show the snackbar when login fails and avoid this error? And why this error appears?

UPDATED

 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;
 

And how can i show snackbar when init page?

This is because you are using the context of the widget that creates the Scaffold (the parent context), not the context of the Scaffold itself. Thus the error.

You can fix the error either by creating a method builder that will receive the correct context:

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

And refactor the page to use the builder method you've just created:

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

Or just extract the login button to its own Widget, without changing any other of your code, and it will receive the proper 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)),
 ),
 ),
 );