Detalhes do pacotev0.0.8

custom_line_indicator_bottom_navbar

Uma barra de navegação inferior totalmente personalizável com indicadores superior e inferior e gradientes.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 132
Curtidas: 28
Pontos Pub: 150

Instalar pacote

flutter pub add custom_line_indicator_bottom_navbar

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Uma barra de navegação inferior altamente personalizável com indicadores superior e inferior com suporte a gradientes. Projetada para desenvolvedores que buscam uma experiência de navegação moderna e visualmente rica em múltiplas plataformas. O pacote permite controle fino sobre cores, formas, animações e posicionamento do indicador, permitindo designs de interface únicos. Integra-se perfeitamente em aplicativos Flutter e suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Navegação de aplicativo personalizada com feedback visual
Criando barras inferiores com marca registrada com gradientes
Melhorando a experiência do usuário com indicadores animados
Construindo aplicativos multiplataforma
Design de interfaces modernas para dispositivos móveis e web

Principais recursos

indicadores totalmente personalizáveis
Suporte a gradiente para cima e para baixo
Transições animadas entre guias
Compatibilidade multiplataforma
Cores e formas configuráveis
Rolagem suave e interações por toque

Indicado para

Desenvolvedores Flutter construindo interfaces modernas
Aplicações voltadas para design que exigem navegação personalizada
Aplicativos direcionados a múltiplas plataformas
Desenvolvedores que desejam controle granular sobre a aparência da navegação inferior

Considerações

Requer entendimento dos princípios de layout do Flutter
Pode ser necessário estilos adicionais para temas complexos
Impacto no desempenho com animações pesadas
Documentação limitada além da configuração básica
Mais adequado para aplicativos com 3 a 6 itens de navegação

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

custom_line_indicator_bottom_navbar

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

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,
            ),
        ],
        ),
    );
    }
}

Categorias

Barra de navegação inferior

Repositório-fonte

Dicksenz/custom_line_indicator_bottom_navbar

barra de navegação inferior com indicador de linha personalizado

☆ 4 Estrelas⑂ 3 Forks

DartSwift

Projetos que usam este pacote

Ainda não há dados.