Bottom Navigation Bar with Sliding Menu Icon and Text With Clipping Effect in Flutter Apps

How to use? 

Add sliding_clipped_nav_bar: to your pubspec.yaml dependencies then run flutter pub get

Add from git [Latest and experimental version]

 dependencies:
  sliding_clipped_nav_bar:
    git:
      url: https://github.com/watery-desert/sliding_clipped_nav_bar  

Add from pub [Stable]

 dependencies:
  sliding_clipped_nav_bar:

Then import the package to use

import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';

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

API reference
 

barItems → List<BarItem>

  • List of bar items that shows horizontally, Minimum 2 and maximum 4 items.
    required

selectedIndex → int

  • Selected index of the bar items.
    required

iconSize → double

  • Size of all icons (inactive items), don't make it too big or will be clipped.
    optional [30]

fontSize → double

  • FontSize of the text.
    optional [16]

fontWeight → FontWeight

  • FontWeight of the text.
    optional [FontWeight.bold]

fontStyle → FontStyle

  • FontStyle of the text.
    optional [null]

activeColor → Color

  • Color of the selected item which indicate selected.
    required

inactiveColor → Color?

  • Inactive color of item, which actually color icons.
    nullable

onButtonPressed → OnButtonPressCallback

  • Callback when item is pressed.
    required

backgroundColor → Color

  • background color of the bar.
    optional [Colors.white]
     

Design Credit & screen recording 

Toolbar icons animation by Cuberto

Do and don't 

Don't make icon size too big.

  • FontAwesomeIcons: 24
  • MaterialIcons: 30

Using SlidingClippedNavBar() when you want global active and inactive color.

 return Scaffold(
     
      body: PageView(
      physics: NeverScrollableScrollPhysics(),       
      controller: controller,
...
      ),
      bottomNavigationBar: SlidingClippedNavBar(
        backgroundColor: Colors.white,
        onButtonPressed: (index) {
          setState(() {
            selectedIndex = index;
          });
          controller.animateToPage(selectedIndex,
              duration: const Duration(milliseconds: 400),
              curve: Curves.easeOutQuad);
        },
        iconSize: 30,
        activeColor: Color(0xFF01579B),
        selectedIndex: selectedIndex,
        barItems: [
          BarItem(
            icon: Icons.event,
            title: 'Events',
          ),
          BarItem(
            icon: Icons.search_rounded,
            title: 'Search',
          ),
           /// Add more BarItem if you want
        ],
      ),
    );
  • Using SlidingClippedNavBar.colorful() when you want to set individual item active & inactive color.
return Scaffold(
    
     body: PageView(
     physics: NeverScrollableScrollPhysics(),
     controller: controller,
...
     ),
     bottomNavigationBar: SlidingClippedNavBar.colorful(
       backgroundColor: Colors.white,
       onButtonPressed: (index) {
         setState(() {
           selectedIndex = index;
         });
         controller.animateToPage(selectedIndex,
             duration: const Duration(milliseconds: 400),
             curve: Curves.easeOutQuad);
       },
       iconSize: 30,
       selectedIndex: selectedIndex,
       barItems: [
         BarItem(
           icon: Icons.event,
           title: 'Events',
           activeColor: Colors.amber,
           inactiveColor: Colors.red,
         ),
         BarItem(
           icon: Icons.search_rounded,
           title: 'Search',
           activeColor: Colors.red,
           inactiveColor: Colors.green,
         ),
        /// Add more BarItem if you want

       ],
     ),
   );

FAQ 

How do I change the height?

The height must be constant because the animation is in vertical direction. According to me 60 is perfect. But if you think needs to be reduced then please create an issue with a screenshot. I will see if I can do something.

How do I add drop shadow?

Wrap SlidingClippedNavBar with DecoratedBox or Container and pass BoxDecoration to decoration property. BoxDecoration takes list of boxShadow there you can pass your drop shadow.

DecoratedBox(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.black.withOpacity(0.2),
            offset: Offset(0, 4),
            blurRadius: 8.0)
      ],
    ),
    child: SlidingClippedNavBar()
)

How do I change the corner radius of the navigation bar?

Wrap SlidingClippedNavBar with ClipRRect and pass BorderRadius to borderRadius property.

  ClipRRect(
      borderRadius: const BorderRadius.vertical(
        top: Radius.circular(16),
      ),
      child: SlidingClippedNavBar(
    )                
All flutter packages 

➜ Sliding Clipped Nav Bar
● Water Drop Nav Bar
● Swipeable Tile
● Loading Animation Widget

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add sliding_clipped_nav_bar

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  sliding_clipped_nav_bar: ^3.1.0+4

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:sliding_clipped_nav_bar/sliding_clipped_nav_bar.dart';

example/lib/main.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(
      title: 'Flutter Demo',
      theme: ThemeData(
        canvasColor: Color.fromARGB(255, 232, 234, 222),
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late PageController _pageController;
  int selectedIndex = 0;
  bool _colorful = false;
  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: selectedIndex);
  }

  void onButtonPressed(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: <Widget>[
          SafeArea(
              child: SwitchListTile(
            title: const Text('Colorful Nav bar'),
            value: _colorful,
            onChanged: (bool value) {
              setState(() {
                _colorful = !_colorful;
              });
            },
          )),
          Expanded(
            child: PageView(
              physics: const NeverScrollableScrollPhysics(),
              controller: _pageController,
              children: _listOfWidget,
            ),
          ),
        ],
      ),
      bottomNavigationBar: _colorful
          ? SlidingClippedNavBar.colorful(
              backgroundColor: Colors.white,
              onButtonPressed: onButtonPressed,
              iconSize: 30,
              // activeColor: const Color(0xFF01579B),
              selectedIndex: selectedIndex,
              barItems: <BarItem>[
                BarItem(
                  icon: Icons.event,
                  title: 'Events',
                  activeColor: Colors.blue,
                  inactiveColor: Colors.orange,
                ),
                BarItem(
                  icon: Icons.search_rounded,
                  title: 'Search',
                  activeColor: Colors.yellow,
                  inactiveColor: Colors.green,
                ),
                BarItem(
                  icon: Icons.bolt_rounded,
                  title: 'Energy',
                  activeColor: Colors.blue,
                  inactiveColor: Colors.red,
                ),
                BarItem(
                  icon: Icons.tune_rounded,
                  title: 'Settings',
                  activeColor: Colors.cyan,
                  inactiveColor: Colors.purple,
                ),
              ],
            )
          : SlidingClippedNavBar(
              backgroundColor: Colors.white,
              onButtonPressed: onButtonPressed,
              iconSize: 30,
              activeColor: const Color(0xFF01579B),
              selectedIndex: selectedIndex,
              barItems: <BarItem>[
                BarItem(
                  icon: Icons.event,
                  title: 'Events',
                ),
                BarItem(
                  icon: Icons.search_rounded,
                  title: 'Search',
                ),
                BarItem(
                  icon: Icons.bolt_rounded,
                  title: 'Energy',
                ),
                BarItem(
                  icon: Icons.tune_rounded,
                  title: 'Settings',
                ),
              ],
            ),
    );
  }
}

// icon size:24 for fontAwesomeIcons
// icons size: 30 for MaterialIcons

List<Widget> _listOfWidget = <Widget>[
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.event,
      size: 56,
      color: Colors.brown,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.search,
      size: 56,
      color: Colors.brown,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.bolt,
      size: 56,
      color: Colors.brown,
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: const Icon(
      Icons.tune_rounded,
      size: 56,
      color: Colors.brown,
    ),
  ),
];

Download details:

Author: waterydesert.com

Source: https://github.com/watery-desert/sliding_clipped_nav_bar

#flutter #android #ios

Bottom Navigation Bar with Sliding Menu Icon and Text With Clipping Effect in Flutter Apps
1.05 GEEK