Flutter Convex Bottom Navigation Bar Example

This post explains you how to integrate Convex Flutter Bottom Navigation Bar in flutter application using example. You can also check out flutter navigation related articles.

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

games.dart

apps.dart

movies.dart

books.dart

main.dart

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.

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.

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

}