Flutter Convex Bottom Navigation Bar Example

This post explains you how to integrate Convex Flutter Bottom Navigation Bar in flutter application using example.

In this example, We will integrate 5 tabs in convex bottom navigation bar. To add this custom bar in our app, First we need to add required dependency. Then we need to add ConvexAppBar widget to attribute bottomNavigationBar in Scaffold widget.

 

Add required dependency in your pubspec.yaml file

convex_bottom_bar: ^2.5.1+1

If you get error after adding this library then you must upgrade your flutter sdk version using flutter upgrade command in terminal.

 
 

Add Tabs Pages

We will require five pages to display on click of particular tab. We will add these pages in array and pass to body parameter in scaffold widget.

 

home.dart

import ‘package:flutter/material.dart’;

class Home extends StatelessWidget{

@override
Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(“Home”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
    );
}

}

 

games.dart

import ‘package:flutter/material.dart’;

class Games extends StatelessWidget{

@override
Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(“Games”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
    );
}

}

 

apps.dart

import ‘package:flutter/material.dart’;

class Apps extends StatelessWidget{

@override
Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(“Apps”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
    );
}

}

 

movies.dart

import ‘package:flutter/material.dart’;

class Movies extends StatelessWidget{

@override
Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(“Movies”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
    );
}

}

 

books.dart

import ‘package:flutter/material.dart’;

class Books extends StatelessWidget{

@override
Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(“Books”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
    );
}

}

 

main.dart

List<Widget> listWidgets = [ Home(), Games(), Apps(), Movies(), Books()];

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.teal,
    ),
    body: listWidgets[selectedIndex],
);

 
 

Add Convex App Bar Widget For Flutter Bottom Navigation Bar

 

ConvexAppBar has different types of attributes. We need to add number of tabs using TabItem widget in array and pass to items attribute. You can also detect click event of tab item using onTap parameter.

 
bottomNavigationBar: ConvexAppBar(
items: [
    TabItem(icon: Icons.home, title: ‘Home’),
    TabItem(icon: Icons.games, title: ‘Games’),
    TabItem(icon: Icons.apps, title: ‘Apps’),
    TabItem(icon: Icons.movie, title: ‘Movies’),
    TabItem(icon: Icons.book, title: ‘Books’),
],
onTap: onItemTapped,
),
 
flutter bottom navigation bar
 
 

We can also set active tab initially using initialActiveIndex property. You can change background of bottom navigation area using backgroundColor property. You can also change height of these bottom bar. We can also set unselected tab icon and text color using color property and selected tab icon and text color using activeColor property. There are different types of styles in convex flutter bottom navigation bar. You can set it using style property.

 
initialActiveIndex: 2,
 
 
 
backgroundColor: Colors.teal,
style: TabStyle.textIn,
 
 
 
backgroundColor: Colors.teal,
style: TabStyle.titled,
 
 
 
bottomNavigationBar: ConvexAppBar.badge({3: ’21+’},
items: [
    TabItem(icon: Icons.home, title: ‘Home’),
    TabItem(icon: Icons.games, title: ‘Games’),
    TabItem(icon: Icons.apps, title: ‘Apps’),
    TabItem(icon: Icons.movie, title: ‘Movies’),
    TabItem(icon: Icons.book, title: ‘Books’),
],
onTap: onItemTapped,
activeColor: Colors.amber,
backgroundColor: Colors.teal,
),
 
flutter bottom navigation bar
 
 

Final Code For Convex Flutter Bottom Navigation Bar

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'apps.dart';
import 'books.dart';
import 'games.dart';
import 'movies.dart';
import 'home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainPage(title: 'Flutter Convex BottomBar Sample'),
    );
  }
}

class MainPage extends StatefulWidget {
  MainPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  int selectedIndex = 0;
  List<Widget> listWidgets = [Home(),Games(),Apps(),Movies(),Books()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.teal,
      ),
      body: listWidgets[selectedIndex],
      bottomNavigationBar: ConvexAppBar.badge({3: '21+'},
        items: [
          TabItem(icon: Icons.home, title: 'Home'),
          TabItem(icon: Icons.games, title: 'Games'),
          TabItem(icon: Icons.apps, title: 'Apps'),
          TabItem(icon: Icons.movie, title: 'Movies'),
          TabItem(icon: Icons.book, title: 'Books'),
        ],
        onTap: onItemTapped,
        activeColor: Colors.amber,
        backgroundColor: Colors.teal,
      ),
    );
  }

  void onItemTapped(int index){
    setState(() {
      selectedIndex = index;
    });
  }

}

 
 

Leave a Reply