Paketdetailsv0.0.8

custom_line_indicator_bottom_navbar

Eine vollständig anpassbare untere Navigationsleiste mit oberem und unterem Indikator sowie Verläufen.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 132
Likes: 28
Pub-Punkte: 150

Paket installieren

flutter pub add custom_line_indicator_bottom_navbar

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Eine hochgradig anpassbare Bottom-Navigation-Bar mit oberen und unteren Indikatoren und Unterstützung für Verläufe. Entwickelt für Entwickler, die eine moderne, visuell ansprechende Navigationserfahrung über mehrere Plattformen hinweg suchen. Das Paket ermöglicht eine fein abgestimmte Steuerung von Farben, Formen, Animationen und Positionierung des Indikators, was einzigartige UI-Designs ermöglicht. Es integriert sich nahtlos in Flutter-Anwendungen und unterstützt alle wichtigen Plattformen wie Android, iOS, Web, macOS, Windows und Linux.

Anwendungsfälle

Benutzerdefinierte App-Navigation mit visueller Rückmeldung
Markenbodenleisten mit Verläufen erstellen
Verbesserung der Benutzererfahrung mit animierten Indikatoren
Erstellen von Multiplattform-Anwendungen
Entwicklung moderner mobiler und Web-Oberflächen

Hauptmerkmale

vollständig anpassbare Indikatoren
Gradientunterstützung für oben und unten
Animierte Übergänge zwischen Registerkarten
Plattformübergreifende Kompatibilität
Konfigurierbare Farben und Formen
Glatte Scrollfunktion und Berührungseingaben

Geeignet für

Flutter-Entwickler, die moderne Benutzeroberflächen erstellen
Designorientierte Anwendungen, die benutzerdefinierte Navigation erfordern
Apps für mehrere Plattformen
Entwickler, die eine fein abgestimmte Steuerung über das Erscheinungsbild der unteren Navigationsleiste wünschen

Hinweise

Erfordert Verständnis der Flutter-Layout-Prinzipien
Möglicherweise sind zusätzliche Stile für komplexe Themen erforderlich
Leistungseinfluss bei schweren Animationen
Beschränkte Dokumentation über die grundlegende Einrichtung hinaus
Am besten geeignet für Apps mit 3–6 Navigationspunkten

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

Kategorien

Untere Navigationsleiste

Quell-Repository

Dicksenz/custom_line_indicator_bottom_navbar

benutzerdefinierte Linienindikator-Unter-Navigation

☆ 4 Sterne⑂ 3 Forks

DartSwift

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.