Flutter - Bubble Bottom Bar Effect
Last Updated :
24 Apr, 2025
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:
Similar Reads
Flutter - Custom BottomBar
App Bar is one of the most popular things that we see in most of the apps. This App bar is used to show options such as a menu, profile, and settings to navigate to different screens. It is one of the most efficient ways to communicate with the app. In this article, we are going to see how to implem
5 min read
Bottomsheet in Flutter
We can create bottomsheet in flutter. Basically, we have two types of bottomsheets in material design: Persistent and Modal. Bottomsheets are used when we want to perform actions. There are basically two types of Bottomsheets: Persistent and Modal. Persistent bottomsheet do not hide the screen conte
3 min read
Flutter - Custom Bottom Navigation Bar
A bottom navigation bar is a material widget that is present at the bottom of an app for selecting or navigating to different pages of the app. It is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument. Though Flutter provides you with the B
9 min read
Flutter - Convex Bottombar
A Convex Bottombar is a app bar designed such a way that there is a convex shape to it. It can make the UI look great and also improve the way user interacts with the Interface. In this article, we will build a simple app with one of the simplest form of Convex bottombar. Steps to build an flutter a
2 min read
Flutter - Hidden Bottom AppBar
Bottom AppBar or Bottom Navigation Bar is mostly used in every Android IOS Application, Bottom Navigation Bar is an AppBar containing Tabs which is used to show more pages on a single screen. We are going to Hide the bottom App Bar on scroll down and show it in scroll up. Â What will we do?We will s
3 min read
Flutter - BottomSheet Class
Bottom Sheet is one of the popular ways to show various options on the screen. This helps the user to switch to a new screen. You will see this bottom sheet in most of the app to add data or add some information such as address or ticket number. In this article, we are going to see how to implement
7 min read
Flutter - Draggable Floating Action Button
In Flutter, Floating Action Buttons are considered modern UI Widgets, in most applications the position of the FAB is fixed but In this article, we are going to explore how can we make a Draggable Floating Action Button and change its position with the help of a Draggable widget in Flutter. A sample
4 min read
Flutter - Custom Tab Bar
In this article, we will see about the Custom Tab Ba, and also how you can create the tab bar inside the tab bar. Making the tab bar is very easy you just go and return the default controller and give the length and Make the tab bar, But In this article, we will see how you can create the tab bar an
5 min read
Flutter - Customizable Ratings bar
Rating Bar as the name suggests is used to rate content inside the application. More or less all applications use them either to gate user feedback on their application or to get a rating for content hosted by the application. Applications like IMDB use them to rate movies and Television series wher
7 min read
Flutter - Extended Floating Action Button
In Flutter, the Floating Action Button (FAB) is a common UI Widget. There are scenarios where you might need to extend the functionality of the FAB to offer additional options or actions. In this article we are going to create a Floating Action Button by clicking it will show 2 more options we can a
4 min read