How to create a button in flutter that always sticks to the bottom of the page?

Viewed 2912

I want to achieve the following PhonePe UI in flutter. How can I make sure that the "Proceed" button always remains at the bottom position ?

Image

5 Answers

You can copy paste run full code below
You can use bottomSheet attribute of Scaffold

return Scaffold(
      ...
      bottomSheet: Container(
        width: MediaQuery.of(context).size.width,
        child: RaisedButton(
          child: Text('PROCEED'),
          onPressed: () {},
        ),
      ),
    );

working demo

enter image description here

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BottomSheetTestPage(),
    );
  }
}

class BottomSheetTestPage extends StatefulWidget {
  @override
  _BottomSheetPageState createState() => _BottomSheetPageState();
}

class _BottomSheetPageState extends State<BottomSheetTestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottom sheet'),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(index.toString()),
            subtitle: Text("${index}"),
          );
        },
        itemCount: 300,
      ),
      bottomSheet: Container(
        width: MediaQuery.of(context).size.width,
        child: RaisedButton(
          child: Text('PROCEED'),
          onPressed: () {},
        ),
      ),
    );
  }
}

You will solve using Expanded widget.

       Expanded(
          child: Align(
            alignment: FractionalOffset.bottomCenter,
            child: MaterialButton(
              onPressed: () => {},
              child: Text(’Proceed'),
            ),
          ),
        ),

You can expand the first part of the layout

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(child: Text('FirstPart')),
        InkWell(
          onTap: () => print('pushed'),
          child: Container(
            width: 100,
            height: 60,
            alignment: Alignment.center,
            color: Colors.black26,
            child: Text('PROCEED'),
          ),
        )
      ],
    );
  }
}

You can use stack like this

Stack(
        children: <Widget>[
          //your other widgets here
          Align(
            alignment: Alignment.bottomCenter,
            child: yourButton,
          )
        ],
      ),

a simple way to do this is using a Scaffold since the scaffold has a bottomNavigationBar attribute that takes a widget then you can simply pass to it a button like this

 Widget build(BuildContext context) {
    return Scaffold(
      // will always be at the bottom
      bottomNavigationBar: FlatButton(onPressed: (){},child: Text("Proceed"),),
      body: Text("your body goes here"),
    );
}
Related