Bottom Bar With Indicator

A Bottom navigation panel with top indicator.

Click here to view the full example.

Installing

Add it to your pubspec.yaml file:

dependencies:
  bottom_bar_with_indicator: ^0.0.2

Install packages from the command line

flutter pub get

Usage

You can use this in the following way:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom bottom bar',
      home: Scaffold(
        bottomNavigationBar: BottomBarWithIndicator(
          selectedIndex: _selectedIndex,
          onIndexChanged: (index) {
            setState(() => _selectedIndex = index);
          },
          themeData: BarWithIndicatorThemeData(
            backgroundColor: const Color(0xFFF6F6F6),
            activeColor: const Color(0xFF3C5FE6),
            inactiveColor: const Color(0xFFB1B8C2),
            floating: true,
          ),
          items: const <BottomBarWithIndicatorItem>[
            BottomBarWithIndicatorItem(icon: Icons.delete, label: 'Item 1'),
            BottomBarWithIndicatorItem(icon: Icons.delete, label: 'Item 2'),
            BottomBarWithIndicatorItem(icon: Icons.delete, label: 'Item 3'),
          ],
        ),
      ),
    );
  }

Result:

Customization

You can customize the widget to your liking. There is a helper BarWithIndicatorThemeData class for this.