border_bottom_navigation_bar 0.0.4 copy "border_bottom_navigation_bar: ^0.0.4" to clipboard
border_bottom_navigation_bar: ^0.0.4 copied to clipboard

A fully customisable Flutter Border Bottom Navigation Bar.

border_bottom_navigation_bar #

A fully customisable Flutter Border Bottom Navigation Bar.

alert2

Usage :

                class HomeView extends StatefulWidget {
                @override
                State<HomeView> createState() => _HomeViewState();
                }

                class _HomeViewState extends State<HomeView> {
                int _currentIndex = 0;
                @override
                Widget build(BuildContext context) {
                    return Scaffold(
                    extendBody: true,
                    appBar: AppBar(
                        backgroundColor: Colors.blue[900],
                    ),
                    body: ListView.builder(
                        itemCount: 100,
                        itemBuilder: (context, index) {
                        return Container(
                            height: 300,
                            margin: const EdgeInsets.only(bottom: 10),
                            decoration: BoxDecoration(
                            color: Colors.grey[350],
                            image: DecorationImage(
                                image: NetworkImage(
                                'https://picsum.photos/id/$index/500',
                                ),
                                fit: BoxFit.cover,
                            ),
                            ),
                        );
                        },
                    ),
                    bottomNavigationBar: BorderBottomNavigationBar(
                        height: 53,
                        currentIndex: _currentIndex,
                        borderRadiusValue: 25,
                        onTap: (index) {
                        setState(() {
                            _currentIndex = index;
                        });
                        print(index);
                        },
                        selectedLabelColor: Colors.white,
                        unselectedLabelColor: Colors.grey,
                        selectedBackgroundColor: Colors.blue[900]!,
                        unselectedBackgroundColor: Colors.grey[200]!,
                        unselectedIconColor: Colors.grey[600]!,
                        selectedIconColor: Colors.white,
                        customBottomNavItems: [
                        BorderBottomNavigationItems(
                            icon: Icons.home,
                        ),
                        BorderBottomNavigationItems(
                            icon: Icons.event_note_outlined,
                        ),
                        BorderBottomNavigationItems(
                            icon: Icons.add_circle_outline_outlined,
                        ),
                        BorderBottomNavigationItems(
                            icon: Icons.rss_feed_outlined,
                        ),
                        BorderBottomNavigationItems(
                            icon: Icons.more_horiz,
                        ),
                        ],
                    ),
                    );
                }
                }
2
likes
120
pub points
48%
popularity

Publisher

unverified uploader

A fully customisable Flutter Border Bottom Navigation Bar.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on border_bottom_navigation_bar