Floating Frosted Bottom Bar
A Flutter package that helps you to create a frosted floating bottom navigation bar that also reacts to scrolling events.
Demo 👀
Usage 🎨
Wrap any child widget with FrostedBottomBar to convert it into frosted bottom bar.
Basic example,
FrostedBottomBar(
opacity: 0.6,
sigmaX: 5,
sigmaY: 5,
child: Text(
"Frosted Bottom Bar Example",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
body: (context, controller) =>
ListView.builder(
controller: controller,
itemBuilder: (context, index) {
return const Card(child: FittedBox(child: FlutterLogo()));
},
),
)
Detail Usage
Following are the optional properties that can be used inside FrostedBottomBar
| Parameter | Example | Action |
|---|---|---|
| sgimaX | sgimaX: 5 |
Creates an image filter that applies a Gaussian blur |
| sgimaY | sgimaY: 5 |
Creates an image filter that applies a Gaussian blur |
| opacity | opacity: 0.6 |
An opacity of 1.0 is fully opaque. An opacity of 0.0 is fully transparent (i.e., invisible). |
| hideOnScroll | hideOnScroll: false |
On true it will hide bottom bar on scroll |
| bottomBarColor | bottomBarColor: Colors.grey |
Change the bottom bar color |
| start | start: 2 |
The start position in y-axis of the SlideTransition of the FrostedBottomBar |
| end | end: 0 |
The end position in y-axis of the SlideTransition of the FrostedBottomBar |
| duration | duration: const Duration(seconds: 1) |
Set the duration of the FrostedBottomBar |
| width | width: MediaQuery.of(context).size.width * 0.6 |
Set the width for FrostedBottomBar |
| borderRadius | borderRadius: BorderRadius.circular(500) |
Set the radius of FrostedBottomBar |
| reverse | reverse: true |
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 | alignment: Alignment.bottomCenter |
Set the alignment of FrostedBottomBar |
| fit | fit: StackFit.loose |
The fit property of the Stack in which the FrostedBottomBar is placed |
| alignment | alignment: Alignment.bottomCenter |
Set the alignment of FrostedBottomBar |