How to set A Button or Text Widget in Flutter At the bottom of the screen

Question

I'm trying to make a LoginPage in Flutter. I Just want to place "Terms of Service. Privacy Policy." Flatbutton At the end of the screen. I tried many things but nothing seems to work!

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expense Tracker',
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  // String titleInput;
  // String amountInput;
  @override
  _LoginPage createState() => _LoginPage();
}

class _LoginPage extends State<LoginPage> {
  final userName = TextEditingController();
  final password = TextEditingController();
  String textDisplay = "";

  void onSubmit() {
    setState(() {
      if (userName == null) {
        textDisplay = "Invalid Username";
      } else if (password == null && userName != null) {
        textDisplay = "Invalid Password";
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LOGIN'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Image.asset("assets/images/nike.png"),
            ),
            Container(
              padding: EdgeInsets.all(10),
              child: Column(
                children: [
                  TextField(
                    controller: userName,
                    decoration: InputDecoration(
                      labelText: "Username",
                      labelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    keyboardType: TextInputType.emailAddress,
                    onSubmitted: (_) => onSubmit(),
                  ),
                  TextField(
                    controller: password,
                    decoration: InputDecoration(
                      labelText: "Password",
                      labelStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    keyboardType: TextInputType.visiblePassword,
                    onSubmitted: (_) => onSubmit(),
                  ),
                  Text(
                    textDisplay,
                    style: TextStyle(
                      color: Colors.redAccent[700],
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      FlatButton(
                        child: Text(
                          "Not a User. Sign Up Here.",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                        onPressed: () {},
                      ),
                      FlatButton(
                        child: Text(
                          "Terms of Service. Privacy Policy.",
                          style: TextStyle(
                            color: Colors.grey[700],
                            fontSize: 13,
                          ),
                        ),
                        onPressed: () {},
                      ),
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

SetState(() {}) Also doen't work! Please explain the answer too as i'm still learning Flutter.

If there are any good changes in my code to make my app better please suggest them.

score 2 · Accepted Answer · 2021-01-01T12:39:40.920

If you separate the contents of the column into two child elements and use mainAxisAlignment: MainAxisAlignment.spaceBetween, you will get the desired result, for the setState part TextEditingController() has a property of text. Also you need to exchange SingleChildScrollView() with CustomScrollView, as per this answer: https://stackoverflow.com/a/62097942/13315601

See the reworked code below:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expense Tracker',
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  // String titleInput;
  // String amountInput;
  @override
  _LoginPage createState() => _LoginPage();
}

class _LoginPage extends State<LoginPage> {
  final userName = TextEditingController();
  final password = TextEditingController();
  String textDisplay = "";

  void onSubmit() {
    setState(() {
      print(userName.text);
      if (userName.text.length == 0) {
        textDisplay = "Invalid Username";
      } else if (password.text.length == 0 && userName.text.length > 0) {
        textDisplay = "Invalid Password";
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LOGIN'),
      ),
      body: CustomScrollView(slivers: [
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: [
                    Image.asset("assets/images/nike.png"),
                    TextField(
                      controller: userName,
                      decoration: InputDecoration(
                        labelText: "Username",
                        labelStyle: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        ),
                      ),
                      keyboardType: TextInputType.emailAddress,
                      onSubmitted: (_) => onSubmit(),
                    ),
                    TextField(
                      controller: password,
                      decoration: InputDecoration(
                        labelText: "Password",
                        labelStyle: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.black,
                        ),
                      ),
                      keyboardType: TextInputType.visiblePassword,
                      onSubmitted: (_) => onSubmit(),
                    ),
                    Text(
                      textDisplay,
                      style: TextStyle(
                        color: Colors.redAccent[700],
                      ),
                    ),
                  ],
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  FlatButton(
                    child: Text(
                      "Not a User. Sign Up Here.",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 15,
                      ),
                    ),
                    onPressed: () {},
                  ),
                  FlatButton(
                    child: Text(
                      "Terms of Service. Privacy Policy.",
                      style: TextStyle(
                        color: Colors.grey[700],
                        fontSize: 13,
                      ),
                    ),
                    onPressed: () {},
                  ),
                ],
              )
            ],
          ),
        )
      ]),
    );
  }
}

If you want to properly validate the username and password you should use form validation, like: https://flutter.dev/docs/cookbook/forms/validation

It works as I expected but when we open the keyboard for typing the password or the username it overflows by some 109 pixels! Give A Solution For This! — Dhruv_2676, Dec 31 '20 at 07:21
How do you see that it overflows, I tested the code on a physical device and there is no overflowing? — , Dec 31 '20 at 07:52
Try opening the keyboard for typing the username and password, it shows some black and yellow lines with some text like ' "numbers" overflowed on the screen' — Dhruv_2676, Dec 31 '20 at 14:34
This happens only in landscape view, you should have clarified this. I now edited the answer including CustomScrollView. This way when the keyboard is called there is no overflow because the view can be scrolled. — , Jan 01 '21 at 12:44

How to set A Button or Text Widget in Flutter At the bottom of the screen

1 Answers1