IT THINK ZONE CLASSIC NAVIGATION BAR 5

A highly customizable bottom navigation bar for Flutter. It can also be used with your very own style without sacrificing any features. View on pub.dev

Showcase

See the ClassicNavigationBar in action:

Note: These do not include all style variations

Features

• New pages can be pushed with or without showing the navigation bar.
• Supports custom navigation bars
• Handles hardware/software Android back button.
• Supports go_router to make use of flutters Router API

Getting Started

1. Install the package

Follow the install instructions.

2. Import the package

import 'package:classic_navigation_bar/classic_navigation_bar.dart';

3. Use the ItemNavigation

The ItemNavigation is your top level container that will hold both your navigation bar and all the pages (just like a Scaffold). Thats why it is not recommended, like this and you are good to go:

import 'package:flutter/material.dart';
import 'package:remixicon/remixicon.dart';
import 'package:classic_navigation_bar/classic_navigation_bar.dart';

import 'constant.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Classic Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const NavigationScreen(),
    );
  }
}



class NavigationScreen extends StatefulWidget {
  final int index;
  const NavigationScreen({super.key, this.index = 0});

  @override
  State<NavigationScreen> createState() => _NavigationScreenState();
}

class _NavigationScreenState extends State<NavigationScreen> {
  int currentIndex = 0;
  double iconSize = 21;
  Color activeIconColor = primaryColor;
  Color inactiveIconColor = Colors.black.withValues(alpha: 0.7);

  // Navigation screens
  final navigationChange = [
    const Center(child: Text('Home Page', style: TextStyle(fontSize: 24))),
    const Center(child: Text('Search Page', style: TextStyle(fontSize: 24))),
    const Center(child: Text('Chat Page', style: TextStyle(fontSize: 24))),
    const Center(child: Text('Settings Page', style: TextStyle(fontSize: 24))),
  ];

  @override
  void initState() {
    super.initState();
    currentIndex = widget.index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: navigationChange.elementAt(currentIndex),
      bottomNavigationBar: ClassicNavigationBar(
        backgroundColor: white,
        lineHeight: 2,
        durationAnimation: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        color: primaryColor,
        borderRadius: BorderRadius.circular(30),
        borderTopColor: black.withValues(alpha: 0.2),
        gradient: LinearGradient(
          colors: [
            primaryColor.withValues(alpha: 0.3),
            primaryColor.withValues(alpha: 0.2),
          ],
          begin: const FractionalOffset(0.0, 0.0),
          end: const FractionalOffset(0.0, 1.0),
          stops: const [.0, 1.0],
          tileMode: TileMode.decal,
        ),
        onChangePage: (v) {
          setState(() {
            currentIndex = v;
          });
        },
        items: [
          ItemNavigation(
            childAfter: Icon(
              Remix.home_fill,
              color: activeIconColor,
              size: iconSize,
            ),
            childBefore: Icon(
              Remix.home_line,
              color: inactiveIconColor,
              size: iconSize,
            ),
            label: 'Home',
          ),
          ItemNavigation(
            childAfter: Icon(
              Remix.search_fill,
              color: activeIconColor,
              size: iconSize,
            ),
            childBefore: Icon(
              Remix.search_line,
              color: inactiveIconColor,
              size: iconSize,
            ),
            label: 'Search',
          ),
          ItemNavigation(
            childAfter: Icon(
              Remix.chat_1_fill,
              color: activeIconColor,
              size: iconSize,
            ),
            childBefore: Icon(
              Remix.chat_1_line,
              color: inactiveIconColor,
              size: iconSize,
            ),
            label: 'Chat',
          ),
          ItemNavigation(
            childAfter: Icon(
              Remix.settings_4_fill,
              color: activeIconColor,
              size: iconSize,
            ),
            childBefore: Icon(
              Remix.settings_4_line,
              color: inactiveIconColor,
              size: iconSize,
            ),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

Navigation

Each of your Tabs will get its own Navigator, so they dont interfere with eachother. That means there will now be a difference between calling Navigator.of(context).push() (which will push a new screen inside the current tab) and Navigator.of(context, rootNavigator: true).push() (which will push a new screen above the whole PersistentTabView, ultimately hiding your navigation bar).

The package includes the following utility functions for expressive navigation.

pushScreen(
  context,
  screen: MainScreen(),
  withNavBar: true/false,
);

pushWithNavBar(
  context,
  MaterialPageRoute(builder: (context) => ...)
);

pushWithoutNavBar(
  context,
  MaterialPageRoute(builder: (context) => ...)
);

License

This project is licensed under the MIT License - see the LICENSE file for details. ```