Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Widget not going to bottom of screen in Flutter?

Tags:

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'),             ),           ),         ],       ),     );   } } 
like image 377
Aaron Zolla Avatar asked Jan 28 '19 03:01

Aaron Zolla


People also ask

How do I position widgets in Flutter?

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.

How do I make the button on the bottom of my screen Flutter?

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.


1 Answers

You will solve using Expanded widget.

        Expanded(           child: Align(             alignment: FractionalOffset.bottomCenter,             child: MaterialButton(               onPressed: () => {},               child: Text(_register ? 'REGISTER' : 'LOGIN'),             ),           ),         ), 

enter image description here

like image 114
ko2ic Avatar answered Dec 13 '22 18:12

ko2ic