Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
custom_line_indicator_bottom_navbar cover
Package detailsv0.0.8

custom_line_indicator_bottom_navbar

A fully customisable bottom navbar with top,bottom indicator and gradients.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
132
Likes
28
Pub points
150

Install package

flutter pub add custom_line_indicator_bottom_navbar

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A highly customizable bottom navigation bar featuring top and bottom indicators with gradient support. Designed for developers seeking a modern, visually rich navigation experience across multiple platforms. The package allows fine-grained control over colors, shapes, animations, and positioning of the indicator, enabling unique UI designs. It integrates seamlessly into Flutter apps and supports all major platforms including Android, iOS, Web, macOS, Windows, and Linux.

Use cases

  • Custom app navigation with visual feedback
  • Creating branded bottom bars with gradients
  • Enhancing user experience with animated indicators
  • Building multi-platform applications
  • Designing modern mobile and web interfaces

Key features

  • Fully customizable indicators
  • Gradient support for both top and bottom
  • Animated transitions between tabs
  • Cross-platform compatibility
  • Configurable colors and shapes
  • Smooth scrolling and tap interactions

Suitable for

  • Flutter developers building modern UIs
  • Design-focused applications requiring custom navigation
  • Apps targeting multiple platforms
  • Developers wanting granular control over bottom nav appearance

Considerations

  • Requires understanding of Flutter layout principles
  • May need additional styling for complex themes
  • Performance impact with heavy animations
  • Limited documentation beyond basic setup
  • Best suited for apps with 3-6 navigation items

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

custom_line_indicator_bottom_navbar

A fully customizable bottom navigation bar with line indicators and gradient.

alert2 alert2

Usage without gradient: 

        class MyExample extends StatefulWidget {
        @override
        _MyExampleState createState() => _MyExampleState();
        }

        class _MyExampleState extends State<MyExample> {
        int _selectedIndex = 0; //default index

        List<Widget> _widgetOptions = [
            Text('Home'),
            Text('Account'),
            Text('Leaves'),
            Text('Loyalty'),
            Text('Requests'),
        ];
        @override
        Widget build(BuildContext context) {
            return Scaffold(
            appBar: AppBar(
                title: Text('Example'),
            ),
            body: Center(
                child: _widgetOptions.elementAt(_selectedIndex),
            ),
            bottomNavigationBar: CustomLineIndicatorBottomNavbar(
                selectedColor: Colors.blue,
                unSelectedColor: Colors.black54,
                backgroundColor: Colors.white,
                currentIndex: _selectedIndex,
                onTap: (index) {
                setState(() {
                    _selectedIndex = index;
                });
                },
                enableLineIndicator: true,
                lineIndicatorWidth: 3,
                indicatorType: IndicatorType.Top,
                // gradient: LinearGradient(
                //   colors: kGradients,
                // ),

                customBottomBarItems: [
                CustomBottomBarItems(
                    label: 'Home',
                    icon: Icons.home,
                ),
                CustomBottomBarItems(
                    label: 'Account',
                    icon: Icons.account_box_outlined,
                ),
                CustomBottomBarItems(
                    label: 'Leaves', icon: Icons.calendar_today_outlined),
                CustomBottomBarItems(
                    label: 'Loyalty',
                    icon: Icons.card_giftcard_rounded,
                ),
                CustomBottomBarItems(
                    label: 'Requests',
                    icon: Icons.list,
                ),
                ],
            ),
            );
        }
        }

Usage with gradient : 

class MyExample extends StatefulWidget {

    @override
    _MyExampleState createState() => _MyExampleState();
}

class _MyExampleState extends State<MyExample> {
    int _selectedIndex = 0; //default index

    List<Widget> _widgetOptions = [
        Text('Home'),
        Text('Account'),
        Text('Leaves'),
        Text('Loyalty'),
        Text('Requests'),
    ];
    @override
    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Example'),
        ),
        body: Center(
            child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: CustomLineIndicatorBottomNavbar(
        selectedColor: Colors.white,
        unSelectedColor: Colors.black54,
        backgroundColor: Colors.white,
        currentIndex: _selectedIndex,
        onTap: (index) {
            setState(() {
            _selectedIndex = index;
            });
        },
        enableLineIndicator: true,
        lineIndicatorWidth: 3,
        indicatorType: IndicatorType.Top,
        gradient: LinearGradient(
            colors: [Colors.pink, Colors.yellow],
        ),
        customBottomBarItems: [
            CustomBottomBarItems(
                label: 'Home',
                icon: Icons.home,
            ),
            CustomBottomBarItems(
                label: 'Account',
                icon: Icons.account_box_outlined,
            ),
            CustomBottomBarItems(
                label: 'Leaves', icon: Icons.calendar_today_outlined),
            CustomBottomBarItems(
                label: 'Loyalty',
                icon: Icons.card_giftcard_rounded,
            ),
            CustomBottomBarItems(
                label: 'Requests',
                icon: Icons.list,
            ),
        ],
        ),
    );
    }
}

Categories

Bottom Navigation Bar

Source repository

Projects using this package

No data available yet.