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" ), ), ); } } |