Flutter Bottom Navigation Bar

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selected = 0;
  static const TextStyle opacityStyle =
      TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = [
    Text(
      'Index 0: Home',
      style: opacityStyle,
    ),
    Text(
      'Index 1: Explore',
      style: opacityStyle,
    ),
    Text(
      'Index 2: Subscription',
      style: opacityStyle,
    ),
    Text(
      'Index 3: Inbox',
      style: opacityStyle,
    ),
    Text(
      'Index 4: Library',
      style: opacityStyle,
    ),
  ];

  void _selectedItem(int value) {
    setState(() {
      _selected = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Bottom Navigation Bar',
        ),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selected),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
              'Home',
              style: opacityStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            title: Text(
              'Explore',
              style: opacityStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.subscriptions),
            title: Text(
              'Subscription',
              style: opacityStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.inbox),
            title: Text(
              'Inbox',
              style: opacityStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.library_books),
            title: Text(
              'Library',
              style: opacityStyle,
            ),
          ),
        ],
        currentIndex: _selected,
        onTap: _selectedItem,
      ),
    );
  }
}

Output:

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.