如何在 Flutter 中设置 A Button 或 Text Widget 在屏幕底部

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.

Answer 1

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