How to Place Any Widget at Bottom of The Screen In Flutter

Flutter provides us with an individual widget to set the alignment of our widgets. All we have to do is wrap the child widget into Align widget and set the alignment using its property and you see the magic. A widget that aligns its child within itself and optionally sizes itself based on the child’s size.

This widget will be as big as possible if its dimensions are constrained and widthFactor and heightFactor are null. If a dimension is unconstrained and the corresponding size factor is null then the widget will match its child’s size in that dimension. If a size factor is non-null then the corresponding dimension of this widget will be the product of the child’s dimension and the size factor. For example, if widthFactor is 2.0 then the width of this widget will always be twice its child’s width.

SOLUTION:

Wrap the Widget using AlignWidget then set its alignment to bottom center.

Align(
   alignment: Alignment.bottomCenter,
   child: ...
)

STEPS:

1. Open your project’s main.dart file and import material.dart package.

import 'package:flutter/material.dart';

2. Creating void main runApp() method and here we would call MyApp component.

void main() => runApp(MyApp());

3. Creating our main MyApp extends StatelessWidget class.

class MyApp extends StatelessWidget {
   ...
}

4. Creating a function named as onClick(). We would call this function on button click event.

onClick() {
   print('Button Clicked');
}

5. Creating Widget Build area -> Here we would make our main Align widget with property Alignment.bottomCenter to put the Button widget at the bottom of screen.

Align(
   alignment: Alignment.bottomCenter,
      child: RaisedButton(
      onPressed: () => onClick(),
      child: const Text('Sample Button'),
      textColor: Colors.white,
      color: Colors.green,
      padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
   ),
)

6. Complete source code for main.dart file :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  onClick() {
    print('Button Clicked');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Place Widget at Bottom of Screen'),
        ),
        body: Center(
            child: Align(
          alignment: Alignment.bottomCenter,
          child: RaisedButton(
            onPressed: () => onClick(),
            child: const Text('Sample Button'),
            textColor: Colors.white,
            color: Colors.green,
            padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
          ),
        )),
      ),
    );
  }
}

Output:

Reference

https://api.flutter.dev/flutter/widgets/Align-class.html