The Frosted Floating Bottom Bar in Flutter

No matter how strong your software backend is, how complex functionality is done by your backend, and no matter how secure your backend is. The only thing that matters to the end-users is how easily your software is operable. And UI/UX plays the most important role in making your software operable. Recent trends in UI/UX include Glassmorphism and Neumorphism which developers try to use in their software. For example, Apple uses Glasmorphism in its many of the software nowadays such as in their website, Apps, and in their OSs.

By following the recent trends in UI/UX, I made my first package in Flutter called Frosted Floating Bottom Bar which also reacts to users’ scroll events. The name of the package itself says that it is Frosted that depicts Glassmorphism, Floating which means it is not fixed, and Bottom Bar which means it is used for bottom navigation. With all of these, reacting to users’ scroll events is like the cherry on the cake.

Demo

Frosted Floating Bottom Bar

Okay, how to use it?

First of all, add the package using the flutter pub get command

flutter pub add floating_frosted_bottom_bar

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

dependencies:
  floating_frosted_bottom_bar: ^0.0.1

Import it

Now in your Dart code, you can use:

import 'package:floating_frosted_bottom_bar/floating_frosted_bottom_bar.dart';

floating_frosted_bottom_bar | Flutter Package

Example

Notice line no. 81 in the above code, that’s where we are using our frosted floating bottom bar package. To make your bottom bar frosted we have to use the widget called FrostedBottomBar(). The three main properties or we can say parameters of this widget are opacity, sigmaX, and sigmaY. These parameter helps us to create Glassmorphism effect on our bottom bar. Controlling these three parameters gives you the Glassmorphism effect that you want.

Other parameters/properties are as follows:

• hideOnScroll — On true it will hide the bottom bar on the scroll
• bottomBarColor — Change the bottom bar color
• start — The start position in y-axis of the SlideTransition of the FrostedBottomBar
• end — The end position in y-axis of the SlideTransition of the FrostedBottomBar
• duration — Set the duration of the FrostedBottomBar
• width — Set the width for FrostedBottomBar
• borderRadius — Set the radius of FrostedBottomBar
• reverse — Reverse the direction of scrolling of FrostedBottomBar i.e. if you want to make the bar visible when you scroll down and hide it when you scroll up, set this to true
• alignment — Set the alignment of FrostedBottomBar
• fit — The fit property of the Stack in which the FrostedBottomBar is placed

I hope this small article and this package which I’ve created will help you a lot. You can find the package code as well as the example code on Github.

GitHub - TheBoy-WhoCode/floating_frosted_bottom_bar

You can always use it in your code and fork it to make changes. If you have any issues with this package, create an issue here. Have some changes and would like to contribute to the open-source community raise a PR here. I would love to accept the pull request.

You can read my previous articles on Medium.

Jiten Patel - Medium

If you like this article please give a clap and if you have any doubts, any issues, you can contact me on LinkedIn, Twitter, & Instagram.

If you loved it, you can Buy Me A Coffee!