pinterest_nav_bar

Pinterest app's Like bottom navigation bar.

Light themeDark theme
Light theme mode video GIFDark theme mode video GIF

Getting Started

Wrap you MaterialApp widget with PinterestNavBarController widget

    return PinterestNavBarController(
      child: MaterialApp(
        title: 'Pinterest Nav Bar Example',
        home: Pages(),
      ),
    );

Adding the widget

  • Note: it is recommended that you use this widget as the Floadting Action Button
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: PinterestNavBar(
        currentIndex: selectedPageIndex,
        onTap: (i) {
          print('PinterestNavBar.onTap($i)');
          setState(() {
            selectedPageIndex = i;
          });
        },
        items: [
          Icons.home,
          Icons.search,
          Icons.chat_bubble_outline_rounded,
          Icons.person
        ],
      ),
  • check out the example app code for complete understanding

Libraries

pinterest_nav_bar