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 the 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.

Only using the Align may not give the desired result. Hence, wrap the Align widget inside the Expanded widget to push the button to the bottom.

See the code snippet given below.

Column(children: <Widget>[
        const Text('Align Button to the Bottom in Flutter'),
        Expanded(
            child: Align(
                alignment: Alignment.bottomCenter,
                child: ElevatedButton(
                    onPressed: () {}, child: const Text('Bottom Button!'))))
      ])

Here, we have both Text and ElevatedButton. The Text will appear at the top and the button will be aligned to the bottom of the screen.

Following is the complete code.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter button at the bottom example'),
      ),
      body: Column(children: <Widget>[
        const Text('Align Button to the Bottom in Flutter'),
        Expanded(
            child: Align(
                alignment: Alignment.bottomCenter,
                child: ElevatedButton(
                    onPressed: () {}, child: const Text('Bottom Button!'))))
      ]),
    );
  }
}

And you will get the following output.

That’s how you add a button to the bottom of the screen in Flutter.