This content originally appeared on Level Up Coding - Medium and was authored by Jiten Patel
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
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.
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!
The Frosted Floating Bottom Bar in Flutter was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Jiten Patel
Jiten Patel | Sciencx (2022-03-08T14:07:50+00:00) The Frosted Floating Bottom Bar in Flutter. Retrieved from https://www.scien.cx/2022/03/08/the-frosted-floating-bottom-bar-in-flutter/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.