Bottom Overflowed By Infinity Pixels

Question

I have written this code for a login page and a signup page for a new messenger game.

https://github.com/wileecoyote2point0/math_game

In the emulator I get the error message: Bottom overflowed by Infinity pixels

Can anyone guide me in the right direction?

I tried to implement scrolling view and I tried MainAxisSize.Min

but can't seem to get it to work.

Answer 1

You have used all the rigid Container, Rows and Columns. Instead of Using fixed sized Containers, Use the flexible size container so that they fit the required size. Here You simple have to put the Expanded Widget Outside the Container widget. Link of the Working app is Working App Image

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'signup.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        theme: new ThemeData(primarySwatch: Colors.purple),
        home: new LoginPage(),
        routes: <String, WidgetBuilder>{
          '/signup': (BuildContext context) => new SignupPage()
        });
  }
}

class LoginPage extends StatefulWidget {
  @override
  State createState() => new LoginPageState();
}

class LoginPageState extends State<LoginPage>
    with SingleTickerProviderStateMixin {
  Animation<double> _iconAnimation;
  AnimationController _iconAnimationController;

  @override
  void initState() {
    super.initState();
    _iconAnimationController = AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 500),
    );
    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeOut);
    _iconAnimation.addListener(() => this.setState(() {}));
    _iconAnimationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.tealAccent,
      body: new Stack(
        fit: StackFit.expand,
        children: <Widget>\[
          new Image(
            image: new AssetImage("assets/nevroner3.jpg"),
            fit: BoxFit.cover,
            color: Colors.black87,
            colorBlendMode: BlendMode.darken,
          ),
          new Theme(
            data: new ThemeData(
              brightness: Brightness.dark,
              inputDecorationTheme: new InputDecorationTheme(
                labelStyle:
                    new TextStyle(color: Colors.tealAccent, fontSize: 20.0),
              ),
            ),
            isMaterialAppTheme: true,
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>\[
                new Image(
                  image: new AssetImage("assets/math_logo3.png"),
                ),
                Expanded(
                  child: new Container(
                    padding: EdgeInsets.all(20.0),
                    child: new Form(
                      autovalidate: true,
                      child: new Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>\[
                          new TextFormField(
                            decoration: new InputDecoration(
                              labelText: "Enter Email",
                              fillColor: Colors.white,
                            ),
                            keyboardType: TextInputType.emailAddress,
                          ),
                          new TextFormField(
                            decoration: new InputDecoration(
                              labelText: "Enter Password",
                              fillColor: Colors.white,
                            ),
                            obscureText: true,
                            keyboardType: TextInputType.text,
                          ),
                          new Padding(
                            padding: const EdgeInsets.only(top: 20.0),
                          ),
                          new MaterialButton(
                              color: Colors.teal,
                              textColor: Colors.white,
                              child: new Text("Login"),
                              onPressed: () => {}),
                          SizedBox(height: 50.0),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>\[
                              Text(
                                "New to Math Messenger ?",
                                style: TextStyle(
                                    color: Colors.grey,
                                    decoration: TextDecoration.underline),
                              )
                            \],
                          ),
                          SizedBox(height: 20.0),
                          InkWell(
                            onTap: () {
                              Navigator.of(context).pushNamed('/signup');
                            },
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>\[
                              Text(
                                "Register",
                                style: TextStyle(
                                  color: Colors.tealAccent,
                                  decoration: TextDecoration.underline,
                                ),
                              ),
                            \],
                          ),
                        \],
                      ),
                    ),
                  ),
                )
              \],
            ),
          ),
        \],
      ),
    );
  }
}][1]