Introduction:
Flutter, the versatile open-source UI framework developed by Google, continues to amaze developers with its rich widget library. One such gem is the Convex BottomBar, a visually appealing navigation widget that stands out with its modern design and smooth user experience. In this blog post, we'll delve into the Convex BottomBar and explore how you can integrate it into your Flutter app to create a stunning and intuitive navigation system.
Understanding the Convex BottomBar:
The Convex BottomBar is an innovative navigation widget that replaces the traditional bottom navigation bar with a sleek and convex design. It offers a fresh look and feel, making it a popular choice for modern app interfaces. With customizable options and interactive animations, the Convex BottomBar ensures a delightful user experience.
Convex BottomBar Package:
The Convex BottomBar package is a third-party Flutter package that provides a stylish and modern alternative to the traditional bottom navigation bar. It is developed and maintained by the Flutter community and can be easily integrated into your app to create an eye-catching and interactive navigation system.
Key Features of Convex BottomBar:
Modern Design: The Convex BottomBar introduces a visually appealing convex shape to the navigation bar, giving your app a fresh and contemporary look.
Customization Options: You can customize various aspects of the Convex BottomBar to match your app's theme and style. You can change the background color, icon design, and animation options.
Animation Effects: The package comes with built-in animation effects that add a touch of interactivity to the navigation. These animations enhance the overall user experience.
Multiple Tab Styles: The Convex BottomBar offers different tab styles, such as fixed circle, fixed rectangle, and text-in icon, allowing you to choose the one that suits your app's design best.
Installation:
To use the Convex BottomBar package in your Flutter app, you need to add it to your project's dependencies in the pubspec.yaml file:
dependencies: flutter: sdk: flutter convex_bottom_bar: ^4.0.0 # Replace with the latest version
Usage Example:
Here's a step-by-step guide to using the Convex BottomBar in your Flutter app:
Import the package:
import 'package:flutter/material.dart'; import 'package:convex_bottom_bar/convex_bottom_bar.dart';
Create a StatefulWidget:
class ConvexBottomBarExample extends StatefulWidget {
@override
_ConvexBottomBarExampleState createState() => _ConvexBottomBarExampleState();
}
Implement the ConvexBottomBar:
class _ConvexBottomBarExampleState extends State<ConvexBottomBarExample> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Convex BottomBar Example'),
),
body: Center(
child: Text(
'Page ${_currentIndex + 1}',
style: TextStyle(fontSize: 24),
),
),
bottomNavigationBar: ConvexAppBar(
backgroundColor: Colors.blue, // Customize the bar background color
style: TabStyle.fixedCircle, // Choose the tab style
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.explore, title: 'Explore'),
TabItem(icon: Icons.favorite, title: 'Favorites'),
TabItem(icon: Icons.settings, title: 'Settings'),
],
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
In this example, we create a basic Flutter app with a Convex BottomBar. The ConvexAppBar widget is used to build the navigation bar. We customize the bar's appearance using the backgroundColor property and select a tab style by setting the style property to TabStyle.fixedCircle. The items list contains the icons and titles for each tab, and the onTap callback is used to update the _currentIndex variable when a tab is tapped.
To Know more about Convex BottomBar Package Click Here
Complete Source Code:
import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter For Geeks',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green.shade700),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter For Geeks'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.primary,
title: Text(
widget.title,
style: const TextStyle(color: Colors.white),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Page ${_currentIndex + 1}',
style: const TextStyle(fontSize: 24),
),
],
),
),
bottomNavigationBar: ConvexAppBar(
backgroundColor: Colors.green.shade700,
style: TabStyle.flip,
items: const [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.explore, title: 'Explore'),
TabItem(icon: Icons.favorite, title: 'Favorites'),
TabItem(icon: Icons.settings, title: 'Settings'),
],
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
In this example, we integrate the Convex BottomBar into a Flutter app. We use the ConvexAppBar widget from the 'convex_bottom_bar' package and customize its appearance. The onTap callback function updates the _currentIndex, changing the displayed page based on the selected icon.
Customizing the Convex BottomBar:
The Convex BottomBar allows for extensive customization to match your app's theme and style. You can adjust the background color, icon design, animation, and more to create a seamless and harmonious user interface.
Video Demo:
Conclusion:
With its sleek design and interactive user experience, the Convex BottomBar takes your Flutter app's navigation to the next level. This blog post introduced you to this impressive widget and demonstrated how to integrate it into your app with practical examples. Embrace the Convex BottomBar to elevate your app's UI and delight your users with an engaging and modern navigation system. Happy coding!
