Bottom Navigation Bar - Flutter

Bottom NavigationBar-Flutter

Berikut adalah contoh pembuatan Bottom navigation Bar pada flutter, dengan menggunakan widget yang bernama bottomNavigationBar. Pada projek ini kita membuat 3 file dart yaitu main.dart,layout1.dart,layout2.dart.

Main.dart

import 'package:btnnav/Layout1.dart';

import 'package:btnnav/Layout2.dart';

import 'package:flutter/material.dart';

void main() => runApp(new ButtonNavDemo());

class ButtonNavDemo extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return new MaterialApp(

      title: 'Bottom Navigation Demo',

      home: new HomeScreen(title: 'Bottom Navigation Demo'),

    );

  }

}

class HomeScreen extends StatefulWidget {

  HomeScreen({Key key, this.title}) : super(key: key);

  final String title;

  @override

  _HomeScreenState createState() => new _HomeScreenState();

}

class _HomeScreenState extends State<HomeScreen> {

PageController _pageController;

int _page =0;

@override

void initState(){

super.initState();

_pageController = new PageController();

}

@override

void dispose(){

  super.dispose();

  _pageController.dispose();

}

void navigaationTapped(int page){

  _pageController.animateToPage(page,duration:const Duration(microseconds: 300),curve:Curves.ease);

}

void onPageChanged(int page){

  setState((){

    this._page=page;

  });

}

  @override

  Widget build(BuildContext context) {

    return new Scaffold(

      appBar : new AppBar(

        backgroundColor: Colors.green,

        title: new Text(widget.title,style:new TextStyle(color:Colors.white))

      ),

      body: new PageView(

        children:[

          Layout1(),

          Layout2(),

        ],

        onPageChanged:onPageChanged,controller: _pageController,

      ),

      bottomNavigationBar: new Theme(data:Theme.of(context).copyWith(canvasColor:Colors.green),

      child: new BottomNavigationBar(

        items: [

          new BottomNavigationBarItem(

            icon:new Icon(Icons.home,

            color:Colors.white

          ),

          title:new Text(

            "Home",style: new TextStyle(color:Colors.white),

          ),

          ),

          new BottomNavigationBarItem(

            icon:new Icon(Icons.message,

            color:Colors.white

          ),

          title:new Text(

            "Message",style: new TextStyle(color:Colors.white),

          )

          )

        ],

        onTap: navigaationTapped,

        currentIndex:_page,

      )

      )

    );

  }

}

Layout1.dart

import 'package:flutter/material.dart';

class Layout1 extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Center(

      child: new Text("Home")

    );

  }

}

Layout2.dart

import 'package:flutter/material.dart';

class Layout2 extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Center(

      child: new Text("Message")

    );

  }

}

Demo dari source code diatas dapat dilihat pada video dibawah