Flutter Bubbled Navigation Navigation -bubbled_navigation_bar

Flutter Bubbled Navigation

Bubbled Navigation Bar library is another simple and useful library in the category of bottom navigation bar. You can easily make some smooth animations while changing the tabs.

Use this package as a library

1. Depend on it

Add this to your package’s pubspec.yaml file:

  bubbled_navigation_bar: any  

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:bubbled_navigation_bar/bubbled_navigation_bar.dart';

Getting Started 

Basic Usage 

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';

import 'package:bubbled_navigation_bar/bubbled_navigation_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: MyHomePage(),

class MyHomePage extends StatefulWidget {
  final titles = ['Main', 'Phone', 'Location', 'Info', 'Profile'];
  final colors = [Colors.red, Colors.purple, Colors.teal, Colors.green, Colors.cyan];
  final icons = [

  MyHomePage({Key key}) : super(key: key);

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  PageController _pageController;
  MenuPositionController _menuPositionController;
  bool userPageDragging = false;

  void initState() {
    _menuPositionController = MenuPositionController(initPosition: 0);

    _pageController = PageController(
      initialPage: 0,
      keepPage: false,
      viewportFraction: 1.0


  void handlePageChange() {
    _menuPositionController.absolutePosition = _pageController.page;

  void checkUserDragging(ScrollNotification scrollNotification) {
    if (scrollNotification is UserScrollNotification && scrollNotification.direction != ScrollDirection.idle) {
      userPageDragging = true;
    } else if (scrollNotification is ScrollEndNotification) {
      userPageDragging = false;
    if (userPageDragging) {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bubbled Navigation Bar'),
      body: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
        child: PageView(
          controller: _pageController,
          children: widget.colors.map((Color c) => Container(color: c)).toList(),
          onPageChanged: (page) {
      bottomNavigationBar: BubbledNavigationBar(
        controller: _menuPositionController,
        initialIndex: 0,
        itemMargin: EdgeInsets.symmetric(horizontal: 8),
        backgroundColor: Colors.white,
        defaultBubbleColor: Colors.blue,
        onTap: (index) {
            curve: Curves.easeInOutQuad,
            duration: Duration(milliseconds: 500)
        items: widget.titles.map((title) {
          var index = widget.titles.indexOf(title);
          var color = widget.colors[index];
          return BubbledNavigationBarItem(
            icon: getIcon(index, color),
            activeIcon: getIcon(index, Colors.white),
            bubbleColor: color,
            title: Text(
              style: TextStyle(color: Colors.white, fontSize: 12),

  Padding getIcon(int index, Color color) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 3),
      child: Icon(widget.icons[index], size: 30, color: color),


Pub Dev Link


Github Link

Previous Post
Next Post

Leave a Reply

Your email address will not be published. Required fields are marked *