Exception thrown when I tried implementing a Login Screen

2

I'm developing a flutter app and I tried using a Login Screen from Flutter Screens and ran into a problem. When I run the app, it does not work and a list of errors is just shown to me. I'm wondering if I'm even using it correctly.

This is my main:

import 'package:flutter/material.dart';
import 'AppDrawer.dart';
import 'LoginScreen.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      theme: new ThemeData(
        primaryColor: Colors.blue.shade400
      ),
      debugShowCheckedModeBanner: false,
      // home: new AppDrawer(),
      home: new Container(
          child: LoginScreen(
          backgroundColor1: Color(0xFF444152),
          backgroundColor2: Color(0xFF6f6c7d),
          highlightColor: Color(0xfff65aa3),
          foregroundColor: Colors.white,
          logo: new AssetImage("assets/images/full-bloom.png"),
        ),
      ),
    );
  }
}

This is the LoginScreen class which I took from the Flutter Screens repo (it is under LoginScreen2):

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  final Color backgroundColor1;
  final Color backgroundColor2;
  final Color highlightColor;
  final Color foregroundColor;
  final AssetImage logo;

  LoginScreen({Key k, this.backgroundColor1, this.backgroundColor2, this.highlightColor, this.foregroundColor, this.logo});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: new BoxDecoration(
        gradient: new LinearGradient(
          begin: Alignment.centerLeft,
          end: new Alignment(1.0, 0.0), // 10% of the width, so there are ten blinds.
          colors: [this.backgroundColor1, this.backgroundColor2], // whitish to gray
          tileMode: TileMode.repeated, // repeats the gradient over the canvas
        ),
      ),
      height: MediaQuery.of(context).size.height,
      child: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.only(top: 150.0, bottom: 50.0),
            child: Center(
              child: new Column(
                children: <Widget>[
                  Container(
                    height: 128.0,
                    width: 128.0,
                    child: new CircleAvatar(
                      backgroundColor: Colors.transparent,
                      foregroundColor: this.foregroundColor,
                      radius: 100.0,
                      child: new Text(
                        "S",
                        style: TextStyle(
                          fontSize: 50.0,
                          fontWeight: FontWeight.w100,
                        ),
                      ),
                    ),
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: this.foregroundColor,
                          width: 1.0,
                        ),
                        shape: BoxShape.circle,
                        //image: DecorationImage(image: this.logo)
                      ),
                  ),
                  new Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: new Text(
                      "Samarth Agarwal",
                      style: TextStyle(color: this.foregroundColor),
                    ),
                  )
                ],
              ),
            ),
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: this.foregroundColor,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Padding(
                  padding:
                      EdgeInsets.only(top: 10.0, bottom: 10.0, right: 00.0),
                  child: Icon(
                    Icons.alternate_email,
                    color: this.foregroundColor,
                  ),
                ),
                new Expanded(
                  child: TextField(
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'samarthagarwal@live.com',
                      hintStyle: TextStyle(color: this.foregroundColor),
                    ),
                  ),
                ),
              ],
            ),
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: this.foregroundColor,
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Padding(
                  padding:
                      EdgeInsets.only(top: 10.0, bottom: 10.0, right: 00.0),
                  child: Icon(
                    Icons.lock_open,
                    color: this.foregroundColor,
                  ),
                ),
                new Expanded(
                  child: TextField(
                    obscureText: true,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: '*********',
                      hintStyle: TextStyle(color: this.foregroundColor),
                    ),
                  ),
                ),
              ],
            ),
          ),
          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 30.0),
            alignment: Alignment.center,
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new FlatButton(
                    padding: const EdgeInsets.symmetric(
                        vertical: 20.0, horizontal: 20.0),
                    color: this.highlightColor,
                    onPressed: () => {},
                    child: Text(
                      "Log In",
                      style: TextStyle(color: this.foregroundColor),
                    ),
                  ),
                ),
              ],
            ),
          ),

          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new FlatButton(
                    padding: const EdgeInsets.symmetric(
                        vertical: 20.0, horizontal: 20.0),
                    color: Colors.transparent,
                    onPressed: () => {},
                    child: Text(
                      "Forgot your password?",
                      style: TextStyle(color: this.foregroundColor.withOpacity(0.5)),
                    ),
                  ),
                ),
              ],
            ),
          ),

          new Expanded(child: Divider(),),

          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0, bottom: 20.0),
            alignment: Alignment.center,
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new FlatButton(
                    padding: const EdgeInsets.symmetric(
                        vertical: 20.0, horizontal: 20.0),
                    color: Colors.transparent,
                    onPressed: () => {},
                    child: Text(
                      "Don't have an account? Create One",
                      style: TextStyle(color: this.foregroundColor.withOpacity(0.5)),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

I think that maybe I'm using the container wrongly in my main at this line:

home: new Container( 

Anyone have any thoughts on what could be the problem ? The error which pops out is as follows (it goes on, this is just the first few lines):

I/flutter (11670): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (11670): The following assertion was thrown building TextField(decoration: InputDecoration(hintText:
I/flutter (11670): "samarthagarwal@live.com", border: _NoInputBorder()), textAlign: center, dirty, state:
I/flutter (11670): _TextFieldState#de3eb):
I/flutter (11670): No Material widget found.
I/flutter (11670): TextField widgets require a Material widget ancestor.
I/flutter (11670): In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
I/flutter (11670): material library, that material is represented by the Material widget. It is the Material widget
I/flutter (11670): that renders ink splashes, for instance. Because of this, many material library widgets require that
I/flutter (11670): there be a Material widget in the tree above them.
I/flutter (11670): To introduce a Material widget, you can either directly include one, or use a widget that contains
I/flutter (11670): Material itself, such as a Card, Dialog, Drawer, or Scaffold.
I/flutter (11670): The specific widget that could not find a Material ancestor was:
I/flutter (11670):   TextField(decoration: InputDecoration(hintText: "samarthagarwal@live.com", border:
I/flutter (11670):   _NoInputBorder()), textAlign: center)
I/flutter (11670): The ancestors of this widget were:
I/flutter (11670):   Expanded(flex: 1)
I/flutter (11670):   Row(direction: horizontal, mainAxisAlignment: spaceBetween, crossAxisAlignment: center)
I/flutter (11670):   Align(alignment: center)
I/flutter (11670):   Padding(padding: EdgeInsets(0.0, 0.0, 10.0, 0.5))
I/flutter (11670):   DecoratedBox(bg: BoxDecoration(border: Border(bottom: BorderSide(Color(0xffffffff), 0.5,
I/flutter (11670):   BorderStyle.solid))))
dart
flutter
asked on Stack Overflow May 15, 2019 by Rajdeep

1 Answer

2

You need to Simply Wrap your parent container with Scaffold.

home: Scaffold(
        body: new Container(
          child: LoginScreen(
            backgroundColor1: Color(0xFF444152),
            backgroundColor2: Color(0xFF6f6c7d),
            highlightColor: Color(0xfff65aa3),
            foregroundColor: Colors.white,
            logo: new AssetImage("assets/images/full-bloom.png"),
          ),
        ),
      ),
answered on Stack Overflow May 15, 2019 by anmol.majhail

User contributions licensed under CC BY-SA 3.0