So I'm trying to get the REGISTER button to align on the bottom center of the screen. I'm relatively new to Flutter and am wondering if there is a way to do this easily, or do I need to rewrite a lot of code? Here's what I have so far. As you can see, I put it in an Align(), but it only goes to the bottom center of the filled area. I think what I have to do is make the outside Container() the height of the entire screen, but I also don't know how to do this. If you have a way to do this, please let me know. Thanks.
import 'package:flutter/material.dart'; class LoginSignupScreen extends StatefulWidget { @override _LoginSignupScreenState createState() => _LoginSignupScreenState(); } class _LoginSignupScreenState extends State<LoginSignupScreen> { // TRUE: register page, FALSE: login page bool _register = true; void _changeScreen() { setState(() { // sets it to the opposite of the current screen _register = !_register; }); } @override Widget build(BuildContext context) { return Container( // height:, child: Column( // mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.all(20), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ButtonBar( children: <Widget>[ MaterialButton( onPressed: _changeScreen, child: Text('REGISTER'), ), MaterialButton( onPressed: _changeScreen, child: Text('LOGIN'), ), ], ), ], ), ), Padding( padding: EdgeInsets.all(20), child: Column( children: <Widget>[ TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'E-MAIL'), ), TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'USERNAME'), ), TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'PASSWORD'), ) ], ), ), Align( alignment: FractionalOffset.bottomCenter, child: MaterialButton( onPressed: () => {}, child: Text(_register ? 'REGISTER' : 'LOGIN'), ), ), ], ), ); } }
Here's how you do it:Step 1: Wrap the Stack's child widget inside the Position widget. Step 2: Inside the Position widget, add the top , right , bottom , left property and give it a value. For example, setting top:15 and right:0 will position a widget on the top right of your screen with 15 px space from the top.
Flutter Bottom Button Using FloatingActionButton You can align FloatingActionButton position to center or almost anywhere using Scaffold's floatingActionButtonLocation property. Use FloatingActionButtonLocation. centerFloat to make FAB to align to bottom.
You will solve using Expanded widget.
Expanded( child: Align( alignment: FractionalOffset.bottomCenter, child: MaterialButton( onPressed: () => {}, child: Text(_register ? 'REGISTER' : 'LOGIN'), ), ), ),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With