Let’s understand step by step of how to achieve the mentioned bottom navigation bar in flutter app, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump directly into our topic.
Introduction
As we get many widgets from google flutter, we also get a bottom navigation widget. Its used to navigate using some icons or text, when we click on them, we are navigated to some specific page. This is what this bottom navigation bar is used for. Let’s see now how to implement the mentioned bar.
Installation
convex_bottom_bar: ^3.0.0You need to use this package and it is the latest version. Of course, you can search for this package in pub.dev as well. Write this line inside your pubspec.yaml file dependencies section.
Now run pub get, this package will get installed and now you can use it in your app.
Convex App Bar
Scaffold(
bottomNavigationBar: ConvexAppBar(
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'Discovery'),
TabItem(icon: Icons.add, title: 'Add'),
TabItem(icon: Icons.message, title: 'Message'),
TabItem(icon: Icons.people, title: 'Profile'),
],
initialActiveIndex: 2, //optional, default as 0
onTap: (val) {},
))
Items
items: [ TabItem(icon: Icons.home, title: 'Home'), TabItem(icon: Icons.map, title: 'Discovery'), TabItem(icon: Icons.add, title: 'Add'), TabItem(icon: Icons.message, title: 'Message'), TabItem(icon: Icons.people, title: 'Profile'), ],
Initial Active Index
initialActiveIndex: 2, //optional, default as 0
Initial active index constructor specifies which item to focus, currently it is set to 2, means the third item of the list as the list starts from index 0.
On Tap
onTap: (val) {},We also have an on tap constructor which is used to perform actions when a specific item of the list is clicked.
Elevation
elevation: 8
Elevation constructor, as the name defines, it elevates, so by giving it a larger value means the shadow that convex app bar spreads/blurs will increase its extent. Let’s see it now:
Background Color
backgroundColor: Colors.pink.shade400,
Its the color of the convex app bar which by default in flutter app is blue, we can change it by using the background color constructor of convex app bar. Let’s see how it looks now:
Curve Size
curveSize: 200
The curve that you see on the upper border of that bar, we can change it by using the curve size container. Let’s see how it looks now:
Gradient
gradient: LinearGradient(
colors: [Colors.pink.shade400, Colors.pink.shade900]
)We can also give our bar a gradient background color by using the gradient constructor. Just pass the linear gradient class and by using its class constructor, we can set the number of colors that we want to pass to our gradient as the color constructor takes a list of colors. Let’s see how our bar is looking after the gradient is added to it:
Height
height: 100
Source Code
This is the complete code for this screen. You can just copy paste it in your app but we recommend you to do it yourself, just don’t forget to first import the package in pubspec.yaml, then you can import it in any page you want within that app. Happy coding.
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({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Beautiful Bottom Bar',
debugShowCheckedModeBanner: false,
home: AppBarPage(),
);
}
}
class AppBarPage extends StatelessWidget {
const AppBarPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
bottomNavigationBar: ConvexAppBar(
backgroundColor: Colors.pink.shade400,
elevation: 8,
gradient: LinearGradient(
colors: [Colors.pink.shade400, Colors.pink.shade900]),
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'Discovery'),
TabItem(icon: Icons.add, title: 'Add'),
TabItem(icon: Icons.message, title: 'Message'),
TabItem(icon: Icons.people, title: 'Profile'),
],
initialActiveIndex: 2, //optional, default as 0
onTap: (int i) => print('click index=$i'),
)),
);
}
}
Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. There are other constructors of convex app bar as well. We want you to try them and share your experience with us. We would be looking forward for your response. Do visit beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions and many more. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.
