Flutter app - Having trouble placing logo at bottom of screen-CodePudding

Im just starting out with flutter and I'm having some trouble moving an asset image towards the bottom of the screen. Im currently working on a login screen, there are text widgets, text fields, and a sign on button, If I used a sized box the way I have it setup it pushes these elements up, whilst I want them to stay where they are, which is in the center of the screen.

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            SizedBox(height: 10),
            // hello!
            Text(
              '(REDACTED)',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
              key: Key("bigText"),
            ),
            SizedBox(height: 10),
            Text(
              'Welcome Back!',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
            SizedBox(height: 20),
            // username
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.white),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 30.0),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'Username'),
                  ),
                ),
              ),
            ),

            SizedBox(height: 15),
            // Password section copied from above
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.white),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 30.0),
                  child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'Password'),
                  ),
                ),
              ),
            ),

            SizedBox(height: 25),

            // sign in button
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40.0),
              child: GestureDetector(
                //onTap: signOn(),
                child: Container(
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.cyan,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: Center(
                    child: Text('Sign In',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        )),
                  ),
                ),
              ),
            ),

            SizedBox(height: 20),
            Image.asset(
              'assets/FMJ.png',
              // The height controls its size for some reason
              height: 100,
            ),
          ]),
      ),
    );
  }
}

CodePudding user response：

You can use Stack Widge and wrap Image in Positioned. Positioned widget is just used in Stack.

Stack(
        alignment: Alignment.center,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              //children except Image
            ],
          ),
          Positioned(
            bottom: 20,
            child:Image.asset('src'),
          )
        ],
      ),
    )

CodePudding user response：

try putting a spacer at the top and bottom (above the image), like this:

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            const Spacer(),
            // hello!
            Text(
              '(REDACTED)',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
              key: Key("bigText"),
            ),
            SizedBox(height: 10),
            Text(
              'Welcome Back!',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
            SizedBox(height: 20),
            // username
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.white),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 30.0),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'Username'),
                  ),
                ),
              ),
            ),

            SizedBox(height: 15),
            // Password section copied from above
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  border: Border.all(color: Colors.white),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 30.0),
                  child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                        border: InputBorder.none, hintText: 'Password'),
                  ),
                ),
              ),
            ),

            SizedBox(height: 25),

            // sign in button
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40.0),
              child: GestureDetector(
                //onTap: signOn(),
                child: Container(
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.cyan,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: Center(
                    child: Text('Sign In',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        )),
                  ),
                ),
              ),
            ),

            const Spacer(),
            Image.asset(
              'assets/FMJ.png',
              // The height controls its size for some reason
              height: 100,
            ),
          ]),
      ),
    );
  }
}

CodePudding user response：

how about Stack ?

...
body: Stack(
   children: [
    Column( // all your widget inside column),
    Positioned(
       bottom:0, left:0, right:0,
       child: Image.asset()
....

or another way, you can use persistentFooterButtons from scaffold

Scaffold(
  body: widget body
  persistentFooterButtons: [ Image.assets() ]
)

persistentFooterButtons : A set of buttons that are displayed at the bottom of the scaffold.