A flutter bottom tab with indicator, similar to the bottom tab of facebook app

Forked Mods

  • Allow svg icon assets for the icons

  • Add labels to nav items

  • Full credit to original repo by Juan Jose Carracedo


Getting Started

Add the dependency in pubspec.yaml:

  bottom_indicator_bar_svg: lastest_version

Basic Usage

class HomePage extends StatefulWidget {
  State createState() => _HomePageState();

class _HomePageState extends State<HomePage> {
  final List<BottomIndicatorNavigationBarItem> items = [
    BottomIndicatorNavigationBarItem(icon: Icons.home, label: Text('Home')),
    BottomIndicatorNavigationBarItem(icon:, label: 'Search'),
    BottomIndicatorNavigationBarItem(icon: 'assets/svgIcon.svg', label: 'Svg', iconSize: 28),

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Indicator Bottom Bar"),
        backgroundColor: Colors.black87,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
      bottomNavigationBar: BottomIndicatorBar(
        onTap: (index) => {},
        items: items,
        iconSize: 30.0,
        indicatorHeight: 5, // Set to 0 to hide the indicator bar
        inactiveColor: Colors.grey,
        backgroundColor: Colors.black87,