Import it to your project file
import 'package:bottom_blur_bar/bottom_blur_bar.dart';
And add it in its most basic form like it:
bottomNavigationBar: BlurNavbar(
onTap: (idx) => setState(() {
_idx = idx;
debugPrint('$idx');
}),
items: [
BlurNavbarItem(icon: Icon(Icons.home, color: color, size: 24), title: "SEARCH"),
BlurNavbarItem(icon: Icon(Icons.search, color: color, size: 24), title: "SEARCH"),
BlurNavbarItem(icon: Icon(Icons.notifications, color: color, size: 24), title: "NOTIFICATIONS"),
BlurNavbarItem(icon: Icon(Icons.local_library_rounded, color: color, size: 24), title: "LIBRARY")
],
currentIndex: _idx,
selectedColor: Colors.cyanAccent,
)
| Parameter | Description |
|---|---|
| onTap | Tap Event |
| items | The collection of sub-controls to be displayed |
| Parameter | Default | Description |
|---|---|---|
| style | auto | Blur Effect Style |
| selectedColor | -- | Defines the color of the selected |
| borderRadius | 24 | Defines the corner radius of the border |
| currentIndex | 0 | Defines the index of the selected |
| fontSize | 10 | Defines the size of the font |
| iconSize | 40 | Defines the size of the icon |
bottom_blur_bar is MIT-licensed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent