Flutter – Sliding Clipped Navbar

In every Android and web application you see the bottom navigation bar that will prettify our Application, But important it is used to show multiple pages on a single screen which made our Application more user interactive. Same in this Article we will work on the newly designed Bottom navigation bar, you also go through to this fancy navigation bar that is also good-looking. In this article we will see a Sliding Clipped navbar, that is look likes

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml File

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

Dart

flutter pub add  sliding_clipped_nav_bar

This will add the following code in the pubspec.yaml file-

Step 3: Import the package into the main file

Dart

import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';

Step 4: Call the main function that will run the main app, and make a stateful widget with the name as you prefer. And return the materialApp and give home property.

Dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Sliding Clipped NavBar',
      theme: ThemeData(
        canvasColor: const Color.fromARGB(255, 201, 199, 186),
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

 @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

Step 5: Add SlidingClippedNavBar() to bottomNavigationBar property of Scaffold() and add PageView() to body with NeverScrollableScrollPhysics() don’t try to update the selected index from onPageChanged or will see some weird behaviour. You can use Stack() or AnimatedSwitcher() for custom page transition animation.

Dart

bottomNavigationBar: SlidingClippedNavBar(
        // color of the navbar
        backgroundColor: const Color.fromARGB(255, 58, 57, 57),
        // change the page of the
        // body by click on tab
        onButtonPressed: changePage,
        // size of the icons of the tab
        iconSize: 30,
        activeColor: const Color.fromARGB(255, 1, 165, 69),
        // color of tab otherthan
        // of selected tab
        inactiveColor: Colors.white,
        // selected tab that point
        // the index of the tab
        selectedIndex: selectedIndex,
        // items of the navigation bar
        barItems: <BarItem>[
          BarItem(
            icon: Icons.css,
            title: 'CSS',
     ),
        // can be many bar items
],

Code Example

Dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Sliding Clipped NavBar',
      theme: ThemeData(
        canvasColor: const Color.fromARGB(255, 201, 199, 186),
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  // page controller instance
  late PageController _pageController;
  int selectedIndex = 0;


  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: selectedIndex);
  }

  void changePage(int index) {
    setState(() {
      selectedIndex = index;
    });
    _pageController.animateToPage(selectedIndex,
        duration: const Duration(milliseconds: 400), curve: Curves.easeOutQuad);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView(
              physics: const NeverScrollableScrollPhysics(),
              controller: _pageController,
              children: _listOfPages,
            ),
          ),
        ],
      ),
      // bottomnavigationbar that call the
      // SlidingClippedNavBar widget
      bottomNavigationBar: SlidingClippedNavBar(
        backgroundColor: const Color.fromARGB(255, 58, 57, 57),
        // change the page of the
        // body by click on tab
        onButtonPressed: changePage,
        // size of the icons of the tab
        iconSize: 30,
        activeColor: const Color.fromARGB(255, 1, 165, 69),
        // color of tab otherthan
        // of selected tab
        inactiveColor: Colors.white,
        // selected tab that point
        // the index of the tab
        selectedIndex: selectedIndex,
        // items of the navigation bar
        barItems: <BarItem>[
          BarItem(
            icon: Icons.css,
            title: 'CSS',
          ),
          BarItem(
            icon: Icons.html,
            title: 'HTML',
          ),
          BarItem(
            icon: Icons.javascript,
            title: 'JavaScript',
          ),
          BarItem(
            icon: Icons.flutter_dash,
            title: 'Flutter',
          ),
        ],
      ),
    );
  }
}

// List of pages
List<Widget> _listOfPages = [
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.css,
      size: 56,
      color: Colors.green,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.html,
      size: 56,
      color: Colors.green,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.javascript,
      size: 56,
      color: Colors.green,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.flutter_dash,
      size: 56,
      color: Colors.green,
    ),
  ),
];

Output: