Persistent footer button flutter example

November 30, 2021

8904

Hi Guys, Welcome to Proto Coders Point, In this flutter tutorial article, will learn how to implement persistent footer button in flutter with example.

Flutter persistent footer button

In Flutter, We can easily set button or any widget at bottom of app to do that we use persistent footer buttons properties of scaffold widget.

A persistentfooterbuttons are a set of widget that is been displayed at bottom of scaffold body.

As the name “persistent” means continuing exist in the view, so any widget defined inside persistent footer button is persistently visible to user, even if user scrolls to the views.

The persistentFooterButtons properties widget are always rendered above flutter bottomNavigationBar(if used) & it’s below scaffold widget body.

Syntax

Scaffold( 
       body:.........,
       persistentFooterButtons: const [
       // any widget here

      ],
)

How to give space between widget in persistent footer buttons

As any you know, Inside persistent footer you can use any widget like IconButton, Icons, TextWidget, Admob ads at bottom in flutter, and you can use SizedBox() widget to give space between widget in flutter.

Snippet Code

persistentFooterButtons: const [

        Icon(Icons.settings),
        SizedBox(width: 5),
        Icon(Icons.exit_to_app),
        SizedBox(width: 10,),

      ],

As you can see in above snippet code, persistent footer button accepts an arrayList of Widget & don’t have any properties to customize it, It make use of backgroundColor from Scafford Widget body.

Here is how the view got generated.

Complete Source Code with persistent footer button properties used in scafford widget

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false ,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: Text("Persistent Footer"),
          centerTitle: true,
        ),
        body: ListView.builder(
            itemCount: 15,
            itemBuilder: (BuildContext context,int index){
              return ListTile(
                  leading: const Icon(Icons.list),
                  title:Text("List item $index")
              );
            }
        ),
        persistentFooterButtons: const [
          Icon(Icons.settings),
          SizedBox(width: 5),
          Icon(Icons.exit_to_app),
          SizedBox(width: 10,),
        ],
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home,color: Colors.blue,),title: Text("Home",style: TextStyle(color: Colors.black),)),
            BottomNavigationBarItem(icon: Icon(Icons.person,color: Colors.blue,),title: Text("Profile",style: TextStyle(color: Colors.black),)),
            BottomNavigationBarItem(icon: Icon(Icons.chat,color: Colors.blue,),title: Text("Chat",style: TextStyle(color: Colors.black),)),
            BottomNavigationBarItem(icon: Icon(Icons.settings,color: Colors.blue,),title: Text("Settings",style: TextStyle(color: Colors.black),))
          ],
        )
    );
  }
}

Output