How to Implement Fancy Bottom NavigationBar in Flutter?

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  fancy_bottom_navigation: ^0.3.3

Scaffold(
    bottomNavigationBar:FancyBottomNavigation(
        initialSelection:0, key: bottomNavigationKey, circleColor:Colors.teal,
        inactiveIconColor:Colors.white, barBackgroundColor:Colors.lightBlueAccent,
        tabs: [
            TabData(
                iconData: Icons.add,
                title: 'Add',
                onclick: 00
            ), //You Can Add More
        ]
        onTabChangedListener:(indexPage) {
            setState() ({
                currentPage = indexPage;
            });
        },
    ),
)

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

void main() => runApp(MaterialApp(home: FancyBottomNavBarRun() ,));

class FancyBottomNavBarRun extends StatefulWidget {
  const FancyBottomNavBarRun({Key? key}) : super(key: key);

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

class _FancyBottomNavBarState extends State<FancyBottomNavBarRun> {
  int currentPage = 0;
  // CurrentPage that hold the current tab value
  GlobalKey bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp with debugShowCheckedModeBanner false,
      debugShowCheckedModeBanner:false,
      home:Scaffold(
        appBar: AppBar(
          title: const Text("Fancy Bottom Navigation"),
        ),
        body:Container(
          width:MediaQuery.of(context).size.width,
          height:MediaQuery.of(context).size.height,
          child: // Showing the body according to the currentPage index.
           (currentPage ==0 )?
             AddPage():
           (currentPage ==1 )?
             ListPage():
             ComparePage(),
        ),
        // NavigationBar which have three tab, each tab have icons and color
        bottomNavigationBar: FancyBottomNavigation(
          initialSelection:0,
          key: bottomNavigationKey,
          circleColor:Colors.teal,
          inactiveIconColor:Colors.white,
          barBackgroundColor:Colors.lightBlueAccent,
          tabs: [
            TabData(
                iconData: Icons.add,
                title: "Add",
                onclick: () {}
            ),
            TabData(
                iconData: Icons.list,
                title: "List",
                onclick: () {}
            ),
            TabData(
                iconData: Icons.compare_arrows,
                title: "Compare",
                onclick: () {}
            ),
          ],
          // When tab changes we also called the setState method to change the currentpage
          onTabChangedListener: (indexPage) {
            setState(() {
              currentPage = indexPage;
            });
          },
        ),
      ),
    );
  }
}

// Classes for showing in the body of the app according to the current page index.
class AddPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment:MainAxisAlignment.center,
      crossAxisAlignment:CrossAxisAlignment.center,
      children: [
        const Icon(Icons.add, size: 30),
        const Text("Add Page")
      ],
    );
  }
}

class ListPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment:MainAxisAlignment.center,
      crossAxisAlignment:CrossAxisAlignment.center,
      children: [
        const Icon(Icons.list, size: 30),
        const Text("List Page")
      ],
    );
  }
}

class ComparePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment:MainAxisAlignment.center,
      crossAxisAlignment:CrossAxisAlignment.center,
      children: [
        const Icon(Icons.compare_arrows, size: 30),
        const Text("Compare Page")
      ],
    );
  }
}