In mobile app development, the bottom navigation bar serves as a critical UI element, providing users with an intuitive way to switch between the core sections of your application. Flutter, known for its power and flexibility, offers a wealth of options for crafting and customizing bottom navigation bars. If you’re aiming to implement a powerful stylish bottom bar in Flutter, the ‘stylish_bottom_bar’ package is an excellent tool to have in your arsenal. This package streamlines the creation of visually appealing bottom bars, packed with features to enhance both the aesthetics and functionality of your Flutter app.

In this blog post, we will guide you through the process of implementing a stylish bottom bar using the stylish_bottom_bar package in Flutter. Let’s get started!

Installation of Stylish Bottom Bar in Flutter

To begin, you need to add the stylish_bottom_bar package to your Flutter project. Open your project’s pubspec.yaml file and add the following dependency:

dependencies:
  stylish_bottom_bar: ^1.0.3

Save the file (ctrl/cmd + s) and run the command in the integrated terminal or Powershell “flutter pub get” to fetch the package.

Example Code

Now that we have the package installed, let’s dive into an example code snippet that determines the usage of the StylishBottomBar widget:

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stylish Bottom Bar'),
      ),
      body: PageView(
        controller: controller,
        children: [
          // Your content pages go here
        ],
      ),
      bottomNavigationBar: StylishBottomBar(
        option: BubbleBarOptions(
          barStyle: BubbleBarStyle.horizontal,
          bubbleFillStyle: BubbleFillStyle.fill,
          opacity: 0.3,
        ),
        items: [
          BottomBarItem(
            icon: const Icon(Icons.home),
            title: const Text('Home'),
            backgroundColor: Colors.red,
          ),
          BottomBarItem(
            icon: const Icon(Icons.safety_divider),
            title: const Text('Safety'),
            backgroundColor: Colors.orange,
          ),
          BottomBarItem(
            icon: const Icon(Icons.cabin),
            title: const Text('Cabin'),
            backgroundColor: Colors.purple,
          ),
        ],
        fabLocation: StylishBarFabLocation.end,
        hasNotch: true,
        currentIndex: selected,
        onTap: (index) {
          setState(() {
            selected = index;
            controller.jumpToPage(index);
          });
        },
      ),
    );
  }
}

Understanding the Example Code

Let’s break down the example code of the stylish bottom navigation bar flutter package to understand how to implement a stylish bottom bar in Flutter using the stylish_bottom_bar package:

Import the necessary packages:

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Inside the state class, define a variable to keep track of the current selected item:

int selected = 0;

In the build method, construct the main scaffold of your app. Use a PageView widget to hold the content pages that relate to each item in the bottom bar:

Scaffold(
  appBar: AppBar(
    title: const Text('Stylish Bottom Bar'),
  ),
  body: PageView(
    controller: controller,
    children: [
      // Your content pages go here
    ],
  ),
  bottomNavigationBar: StylishBottomBar(
    // Bottom bar options and items configuration go here
  ),
);

Configure the StylishBottomBar widget with the desired options and items:

StylishBottomBar(
  option: BubbleBarOptions(
    barStyle: BubbleBarStyle.horizontal,
    bubbleFillStyle: BubbleFillStyle.fill,
    opacity: 0.3,
  ),
  items: [
    BottomBarItem(
      icon: const Icon(Icons.abc),
      title: const Text('Abc'),
      backgroundColor: Colors.red,
      selectedIcon: const Icon(Icons.read_more),
    ),
    BottomBarItem(
      icon: const Icon(Icons.safety_divider),
      title: const Text('Safety'),
      backgroundColor: Colors.orange,
    ),
    BottomBarItem(
      icon: const Icon(Icons.cabin),
      title: const Text('Cabin'),
      backgroundColor: Colors.purple,
    ),
  ],
  fabLocation: StylishBarFabLocation.end,
  hasNotch: true,
  currentIndex: selected,
  onTap: (index) {
    setState(() {
      selected = index;
      controller.jumpToPage(index);
    });
  },
);

Customize the options and items as per your needs. You can also explore the stylish_bottom_bar package documentation guide for more details on the available options.

Conclusion:

Congratulations! You have successfully learned how to implement a stylish bottom bar in your Flutter app using the stylish_bottom_bar package. With the flexibility and customization options provided by this package, you can create UI and UX good bottom navigation bars for your Flutter applications. Feel free to experiment with different styles, animations, and configuring options to match your app-specific design.

Happy coding!