How to Place a Button at Bottom of the Screen in Flutter

While designing the mobile user interface, sometimes we may need to align widgets at the bottom of the screen. In this blog post, let’s check how to place a button at the bottom of the screen in Flutter.

We need to use Align class to align widgets at the bottom, Align class has a property named alignment, that’s where we specify the desired position of the widget. Then we use Alignment class with the constant bottomCenter.

The bottomCenter constant aligns the button bottom vertically and centers the button horizontally. You can also use constants such as bottomLeft, bottomRight, center, centerLeft, centerRight, topCenter, topLeft and topRight.

In the following Flutter example, I am aligning the RaisedButton widget to the bottom center of the screen.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter button at the bottom example'),
        ),
        body: Center(child: Body()),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: RaisedButton(
        onPressed: () {},
        child: const Text('Bottom Button!', style: TextStyle(fontSize: 20)),
        color: Colors.blue,
        textColor: Colors.white,
        elevation: 5,
      ),
    );
  }
}

The output screenshot is as given below:

bottom button flutter example

1 thought on “How to Place a Button at Bottom of the Screen in Flutter”

  1. Pingback: How to Place a Button at the Top of the Screen in Flutter – Flutter For You

Leave a Comment

Your email address will not be published. Required fields are marked *