CODEWITHSUNDEEP
flutter
Anil8753
Anil8753

Reputation: 2735

How to add application footer (Using bottomNavigationBar)

We can add a header using AppBar widget.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new Icon(Icons.mail),
        title: new Text("Hello Flutter Header"),
      ),
      body: new Center(
        child: new MyButton(),
      ),
      // **************************************
      // I want to add application footer here
      // **************************************
    );
  }
}

How can we add an Application Footer?

Upvotes: 1

Views: 15137

Answers (4)

ICeZer0
ICeZer0

Reputation: 588

persistentFooterButtons will render above bottomNavigationBar. Here is my solution in 2021, to add the application footer using bottomNavigationBar.

Note, title: is deprecated you should be using label:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Container(),
    bottomNavigationBar: new BottomNavigationBar(
      items: [
        new BottomNavigationBarItem(
          icon: Icon(Icons.thumb_up),
          label: "Like",
        ),
        new BottomNavigationBarItem(
          icon: Icon(Icons.thumb_down),
          label: "Dislike",
        ),
        new BottomNavigationBarItem(
          icon: Icon(Icons.comment),
          label: "Comment",
        )
      ],
    ),
  );
}

Upvotes: 1

softmarshmallow
softmarshmallow

Reputation: 1284

you can also accomplish that with flutter_layouts

https://github.com/softmarshmallow/flutter-layouts https://github.com/softmarshmallow/flutter-layouts/tree/master/lib/src/footer

enter image description here

Upvotes: 0

Anil8753
Anil8753

Reputation: 2735

I found bottomNavigationBar is working for me.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: new Icon(Icons.mail),
        title: new Text("Hello Flutter Header"),
      ),
      body: new Center(
        child: new MyButton(),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.add),
            title: new Text("Add"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.edit),
            title: new Text("Edit"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.delete),
            title: new Text("Delete"),
          ),
        ],
      ),
    );
  }
}

As mentioned by @aziza, we can use persistentFooterButtons also. But in this approach buttons are not spaning perfectly in the horizontal direction.

 persistentFooterButtons: <Widget>[
        new FlatButton(
          child: new Icon(Icons.add),
          onPressed: null,
        ),
        new FlatButton(
          child: new Icon(Icons.edit),
          onPressed: null,
        ),
        new FlatButton(
          child: new Icon(Icons.delete),
          onPressed: null,
        ),
      ],

Another thing is both bottomNavigationBar and persistentFooterButtons can be used simultanously. persistentFooterButtons displyed between body and bottomNavigationBar.

Upvotes: 0

Shady Aziza
Shady Aziza

Reputation: 53337

There is a persistentFooterButtons property in Scaffold.

Upvotes: 4

Related Questions