page_view_with_curved_navigation_bar.dart

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

class Home extends StatefulWidget {
  const Home({
    Key? key,
  }) : super(key: key);
  static HomeState of(BuildContext context) =>
      context.findAncestorStateOfType<HomeState>()!;
  @override
  HomeState createState() => HomeState();
}

const duration = Duration(milliseconds: 500);
const curve = Curves.easeInOut;

class HomeState extends State<Home> {
  final PageController pageController = PageController();

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Material App Bar')),
      body: PageView.builder(
        controller: pageController,
        itemCount: 3,
        itemBuilder: (context, index) => Center(
          child: Text('Index $index'),
        ),
      ),
      bottomNavigationBar: const BottomNav(),
    );
  }
}

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

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

class _BottomNavState extends State<BottomNav> {
  var isLoaded = false;
  @override
  void initState() {
    super.initState();

    /// This is used to only show the bottom navigation bar after the page has been loaded
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      setState(() {
        isLoaded = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final home = Home.of(context);
    final pageController = home.pageController;
    return AnimatedBuilder(
      animation: pageController,
      builder: (context, snapshot) {
        if (!isLoaded || !pageController.hasClients) {
          return const SizedBox.shrink();
        }
        final _index = pageController.page!.round();
        return CurvedNavigationBar(
          items: const [
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
          ],
          animationDuration: duration,
          animationCurve: curve,
          index: _index,
          onTap: (index) {
            pageController.animateToPage(
              index,
              duration: duration,
              curve: curve,
            );
          },
        );
      },
    );
  }
}