Flutter – Bubble Bottom Bar Effect

In Flutter, a bottom bar usually refers to a navigation bar or bottom navigation bar, which is a common UI pattern used to navigate between different sections or pages of an app. It’s typically placed at the bottom of the screen and contains a set of buttons or icons. There is a package bottom_bar_matu is available in Flutter to create a Bottom bar and add a Bubble effect to it. In this article, we are going to create a Bottom bar and add a Bubble effect to it with the help of the bottom_bar_matu package in the simplest way. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Required Dependency

Add the below dependency to your pubspec.yaml file.

dependencies:
  bottom_bar_matu: ^1.3.0

Or, Simple we can run the below command in our Vs Code Terminal to install this package .

flutter pub add bottom_bar_matu

Step 3: Import the Package

First of all import material.dart and bottom_bar_matu.dart package.

import 'package:flutter/material.dart';
import 'package:bottom_bar_matu/bottom_bar_matu.dart';

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Bar Bubble Example',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: BottomBarBubbleExample(),
    );
  }
}

Step 6: Create BottomBarBubbleExample Class

In this class we are going to Implement the Bubble effect Navigation bar add Navigation Items to it in a very simple way with the help of bottom_bar_matu package. Comments are added for better understandings.

bottomNavigationBar: BottomBarBubble(
        // Bubble effect Navigation bar
        items: [
          // Add Navigation Items
          BottomBarItem(
            iconData: Icons.home,
            label: 'Home',
          ),
          BottomBarItem(
            iconData: Icons.work,
            label: 'Work',
          ),
          BottomBarItem(
            iconData: Icons.email_outlined,
            label: 'Email',
          ),
          BottomBarItem(
            iconData: Icons.timeline,
            label: 'TimeLine',
          ),
        ],
        onSelect: (index) {
          // implement your select function here
        },
      ),

Dart

class BottomBarBubbleExample extends StatefulWidget {

  const BottomBarBubbleExample({Key? key}) : super(key: key);

  @override
  State<BottomBarBubbleExample> createState() => _BottomBarBubbleExampleState();
}

class _BottomBarBubbleExampleState extends State<BottomBarBubbleExample> {
  int selectedIndex = 0;
  final PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom Bar Bubble Example"),
      ),
      bottomNavigationBar: BottomBarBubble(
        // Bubble effect Navigation bar
        items: [
          // Add Navigation Items
          BottomBarItem(
            iconData: Icons.home,
            label: 'Home',
          ),
          BottomBarItem(
            iconData: Icons.work,
            label: 'Work',
          ),
          BottomBarItem(
            iconData: Icons.email_outlined,
            label: 'Email',
          ),
          BottomBarItem(
            iconData: Icons.timeline,
            label: 'TimeLine',
          ),
        ],
        onSelect: (index) {
          // implement your select function here
        },
      ),
      body: Center(
        child: Text("Flutter Bottom Bar Bubble Effect"),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';
import 'package:bottom_bar_matu/bottom_bar_matu.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Bar Bubble Example',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: BottomBarBubbleExample(),
    );
  }
}

class BottomBarBubbleExample extends StatefulWidget {
  const BottomBarBubbleExample({Key? key}) : super(key: key);

  @override
  State<BottomBarBubbleExample> createState() => _BottomBarBubbleExampleState();
}

class _BottomBarBubbleExampleState extends State<BottomBarBubbleExample> {
  int selectedIndex = 0;
  final PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom Bar Bubble Example"),
      ),
      bottomNavigationBar: BottomBarBubble(
        // Bubble effect Navigation bar
        items: [
          // Add Navigation Items
          BottomBarItem(
            iconData: Icons.home,
            label: 'Home',
          ),
          BottomBarItem(
            iconData: Icons.work,
            label: 'Work',
          ),
          BottomBarItem(
            iconData: Icons.email_outlined,
            label: 'Email',
          ),
          BottomBarItem(
            iconData: Icons.timeline,
            label: 'TimeLine',
          ),
        ],
        onSelect: (index) {
          // implement your select function here
        },
      ),
      body: Center(
        child: Text("Flutter Bottom Bar Bubble Effect"),
      ),
    );
  }
}

Output: