How to add bottom navigation bar to this flutter code

Question

I have used backdrop navigation and now i am not able to add bottom navigation bar to this code, Please i am new to flutter can anyone help me.

Here is my gridview which works as frontlayer for my backdrop navigation bar.

var myGridView = new GridView.builder(
  itemCount: spacecrafts.length,
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    // childAspectRatio: (itemWidth / itemHeight),
  ),
  itemBuilder: (BuildContext context, int index) {
    return new GestureDetector(
      child: new Card(
        elevation: 5.0,
        child: new Container(
          alignment: Alignment.centerLeft,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Image.asset(
                  images[index],
                  color: Colors.blue,
                ),
                Text(
                  spacecrafts[index],
                  style: TextStyle(color: Colors.blue),
                )
              ],
            ),
          ),
        ),
      ),
    );
  },
);

int _currentIndex = 0;
final List<Widget> _pages = [
  Profile(),
  AboutUs(),
  TermsAndConditions(),
  SignOut()
];

here is my backdrop navigation bar code

return new BackdropScaffold(
  appBar: new BackdropAppBar(
    title: new Text("Flutter GridView"),
  ),
  stickyFrontLayer: true,
  frontLayer: myGridView,
  backLayer: BackdropNavigationBackLayer(
    items: [
      ListTile(leading: Image.asset("images/user.png", color: Colors.white),
          title: Text("YOUR PROFILE",
            style: TextStyle(color: Colors.white),)),
      ListTile(leading: Image.asset("images/logout.png",
          color: Colors.white), title: Text("LOGOUT",
          style: TextStyle(color: Colors.white))),
    ],
    onTap: (int position) => {setState(() => _currentIndex = position)},
  ),
);

}

score 0 · Answer 1 · answered Jun 24 '20 at 16:41

0

Flutter Scaffolds have a built-in Bottom Navigation Bar, You can utilize it the same way you do appbar & body. Heres an example here.

Scaffold(

appbar: Appbar( 


)

body: Container()



 bottomNavigationBar: BottomNavigationBar(items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('FooBar'),
          
        )

)

answered Jun 24 '20 at 16:41

Thomas Vallee

266
3
4

but is it possible to add bottom navigation when we are using backdrop navigation bar?? – Jun 24 '20 at 17:31

How to add bottom navigation bar to this flutter code

1 Answers1