How to Align Widget On a Bottom Of Screen In Flutter?

Align Widget?is a?widget that aligns its child within itself and optionally sizes itself based on the child’s size. In today’s article, we will go through how to align the widget on the bottom of the screen in flutter?

How to Align Widget On a?Bottom Of Screen In Flutter?

One way to do this is as below:

return Scaffold(     
  bottomNavigationBar: BottomAppBar(
    color: Colors.transparent,
    child: Text('bottom screen widget'),
    elevation: 0,
  ),
  body: Text('body')
  );        

You can also try the below way?Expanded Widget?like the below:

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

Code Structure

class TabDemo extends StatefulWidget {
  @override
  State createState() => _TabDemoState();
}
class _TabDemoState extends State
{
  void initState() {
    super.initState();
  }
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: Text("My App Demo"),),

      body: new Stack(
        children: [
          Offstage(
              offstage: _currentIndex != 0,
              child: Tab1()
          ),
          Offstage(
              offstage: _currentIndex != 1,
              child: Text("Tab 2")
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
              icon: new Icon(Icons.create),
              title: new Text('Info')),
          BottomNavigationBarItem(
              icon: new Icon(Icons.home_outlined),
              title: new Text('Home')),
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class Tab1 extends StatefulWidget {
  @override
  State createState() {
    return _Tab1State();
  }
}

class _Tab1State extends State with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
        margin: const EdgeInsets.all(20.0),
        child: Form(
          child: ListView(
            children: const[

              TextField(
                decoration: InputDecoration(
                    hintText: 'Enter first name'
                ),
              ),
              SizedBox(height: 25,),
              TextField(
                decoration: InputDecoration(
                    hintText: 'Enter last name'
                ),
              ),

            ],),)

    );
  }
  @override
  bool get wantKeepAlive => true;
}        

We will get output like the below:

Conclusion:

Thanks for being with us on a?Flutter Journey?!!!

In this article, we have been through how to align widgets on the bottom of the screen in flutter?

Keep?Learning?!!! Keep?Fluttering?!!!

Flutter Agency?is one of the most popular online portals dedicated to?Flutter Technology?and daily thousands of unique visitors come to this portal to enhance their knowledge on?Flutter.

Article source: https://flutteragency.com/how-to-align-widget-on-a-bottom-of-screen-in-flutter/