The convex Bottom bar is an app bar sketch in such a way that there is a convex shape to it. It can make the UI look great and also refine the way a user interacts with the Interface. In this article, we will build a simple app with one of the simplest forms of Convex bottom bar In Flutter
Table Of Contents:
Introduction:
Hello everyone, today we are discussing a very important topic of flutter UI which is the bottom navigation bar. In this article, we learn about Convex Bottom Bar. Convex Bottom Bar is a package of flutter. The convex Bottom bar is an app bar sketch in such a way that there is a convex shape to it. It can make the UI look great and also refine the way a user interacts with the Interface. In this article, we will build a simple app with one of the simplest forms of Convex bottom bar.
Providing a list TabItems widgets you can explain the icons and their title shown in the appbar. The list should contain only an odd number of TabItems to run the widget without fallacy causing. If you want to show images alternatively of icons you can provide images for the icon variable in each TabItem widget. If you want to generate a single Icon bottom appbar you can use the ConvexButton.fab widget. It produces you with fewer parameters and a quick and nice-looking one-icon-appbar.
Add Dependency:
In your project go to the pubspec. yaml and add the dependencies under the dependencies: add the latest version of convex_bottom_bar.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
convex_bottom_bar: ^3.0.0we use convax_bottom_bar for a better bootom_bar UI.
How to Use:
Generally, ConvexAppBar can work with scaffold by setup its bottomNavigationBar.The convexAppBar has two constructors, the convexAppBar() will use the levant style to simplify the tab creation. Add this to your package’s pubspec.yaml file, use the latest version.
Scaffold(
body: bottomNavigationBar: ConvexAppBar();
);Features:
- Provide various internal styles.
- capability to change the theme of AppBar.
- Provide builder API to modify a new style.
- include the badge on the tab menu.
- graceful transition animation.
- Provide hook API to override some of the interior styles.
- RTL reinforce.
Properties:
There are some properties of Convex_Bottom_Bar are:
- fixed (subhead icon stays in the center)
- fixedCircle (same but with a white circle on all sides the fixed icon)
- react (superscripted icon replace on tapping another icon)
- reactCircle (same but with a white circle throughout the superscripted icon)
- textIn (the selected Ion appear his corresponding title)
- titled (the non-selected icons are single showing their title)
- flip (the tapped icon shows a flip animation)
- custom (to customize premeditated parameters using the ConvexBottomAppBar builder)
- height (grabbing the appbar)
- top (grabbing the superscripted icon)
- curveSize (stretching the curve of the superscripted icon)
- color (setting the color of the icon)
- backgroundColor (setting the appbar background color)
- gradient (setting the appbar background color using a gradient widget)
- activeColor (setting the circle color)
Implementation:
In the Convex_Bottom_Bar demo, First, we create a stateful class with the name MyHomePage() in this class we create a variable selectedpage type of integer pass with the value zero. and define a list with the name _pageNo, in which we pass all the pages which we want to add in bootom_navigation_bar.
int selectedpage =0;
final _pageNo = [Home() , Favorite() , CartPage() , ProfilePage()];In BuildContext(), we define Scaffold. In the appbar, we define the name and center tile.
appBar: AppBar(
centerTitle: true,
title: Text('Convex Bottom Bar'),
),After that in the body first, we pass the _pageNo with the value of selectedPage. and use the property of scaffold we use bottomNavigationBar. In this, we create ConvexAppBar() and pass Items, initialActiveIndex and onTap. in Items, we pass all the screens which we want to show in our application. And in initialActiveIndexwe pass the variable selectedpage which we already define and in onTap we pass index and define setState() in the setState we pass selectedpage equal to index.
bottomNavigationBar: ConvexAppBar(
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.favorite, title: 'Favorite'),
TabItem(icon: Icons.shopping_cart, title: 'Cart'),
TabItem(icon: Icons.person, title: 'Profile'),
],
initialActiveIndex: selectedpage,
onTap: (int index){
setState(() {
selectedpage = index;
});
},
),For index we create different pages, Home(), Favorite(), CartPage(), ProfilePage(). In the Home class we define a text with a background color.
Home Screen:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Home Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),),
),
);
}
}Favorite Screen:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Favorite extends StatefulWidget {
const Favorite({Key? key}) : super(key: key);
@override
_FavoriteState createState() => _FavoriteState();
}
class _FavoriteState extends State<Favorite> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.greenAccent,
body: Center(
child: Text('Favorite Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
)),
);
}
}CartPage Screen:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CartPage extends StatefulWidget {
const CartPage({Key? key}) : super(key: key);
@override
_CartPageState createState() => _CartPageState();
}
class _CartPageState extends State<CartPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink.shade100,
body: Center(
child: Text('Cart Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),)),
);
}
}ProfilePage Screen:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ProfilePage extends StatefulWidget {
const ProfilePage({Key? key}) : super(key: key);
@override
_ProfilePageState createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.yellow,
body: Center(
child: Text('Profile Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),)),
); }
}When we run the application, we ought to get the screen’s output like the underneath screen video.
Conclusion:
In this article, we have been through What is Convex Bottom Bar along with how to implement it in a Flutter. You can use the package according to your requirement.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
Find the source codeof the Convex Bottom Bar:
GitHub – flutter-devs/convex_bottom_bar_demo
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
