Not Able add action to the custom bottom navigation in flutter

Question

I am using convex_bottom_bar widget for the bottom navigation, I added it successfully in the app but I can't find how to add action on pressing the tab, I mean to change the view on changing the view, In the documentation as well I couldn't find anything, I would like to learn how to change the data on changing tab

class BottomButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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: (int i) => print('click index=$i'),
    );
  }
}

Answer 1

You need a DefaultTabController.

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';

class TestConvexBar extends StatelessWidget {
  TabController _tabController;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      child: Scaffold(
        bottomNavigationBar: ConvexAppBar(
          controller: _tabController,
          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'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Icon(Icons.home),
            Icon(Icons.map),
            Icon(Icons.add),
            Icon(Icons.message),
            Icon(Icons.people),
          ],
        ),
      ),
      length: 5,
    );
  }
}