Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von bottom_sheet_expandable_bar
Paketdetailsv0.1.2

bottom_sheet_expandable_bar

Ein Paket, um eine untere Leiste anzuzeigen und die Fähigkeit zu haben, eine untere Seite auszudehnen und anzuzeigen

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
54
Likes
28
Pub-Punkte
140

Paket installieren

flutter pub add bottom_sheet_expandable_bar

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das eine untere Navigationsleiste mit der Möglichkeit bietet, sich zu einer unteren Seite auszudehnen und zusätzlichen Inhalt oder Aktionen bereitzustellen. Es verbessert die Benutzerinteraktion, indem es die Einfachheit einer unteren Leiste mit der Flexibilität einer unteren Seite kombiniert. Ideal für Apps, die kompakte Navigation mit erweiterbaren Funktionen benötigen, unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Das Paket ist leichtgewichtig und lässt sich nahtlos in bestehende Flutter-Projekte integrieren.

Anwendungsfälle

  • Mobile App-Navigation mit erweiterbaren Optionen
  • Verbesserung der Benutzeroberfläche mit interaktiven Bottom Sheets
  • Dynamische Fußleisten in Web- und Desktop-Anwendungen erstellen
  • Bereitstellung schnellen Zugriffs auf sekundäre Aktionen
  • Responsive Layouts über Plattformen hinweg gestalten

Hauptmerkmale

  • Erweiterbare Bottom-Bar-Schnittstelle
  • Unterstützt mehrere Plattformen
  • Einfache Integration mit Flutter
  • Anpassbare Erscheinung und Verhalten
  • Glatte Animationsübergänge
  • Eingebaute Gestenverarbeitung

Geeignet für

  • Entwickler, die mehrplattformfähige Flutter-Apps erstellen
  • UI-Designer, die interaktive Navigationsmuster suchen
  • Apps, die zusammenfaltbare Aktionen-Panels erfordern
  • Projekte, die ein konsistentes Querplattform-UX-Ziel verfolgen
  • Teams, die eine minimale Einrichtung für erweiterte Bottom-Sheet-Funktionen wünschen

Hinweise

  • Kann zusätzliche Styling für komplexe Designs erfordern
  • Leistungsbeeinträchtigung bei umfangreichem Inhalt in der Untertabelle
  • Eingeschränkte Anpassung über grundlegende Erweiterung/Zusammenklappung hinaus
  • Am besten geeignet für moderate Inhaltmengen
  • Erfordert sorgfältige Behandlung des Bildschirmraums auf kleineren Geräten

Original-README

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

Bottom Sheet Expandable Bar

This package create a bottom navigation bar with the capability to show a bottom sheet.

Instalation

Include bottom_sheet_expandable_bar in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  bottom_sheet_expandable_bar: version

Usage

To use this package, just import it into your file and enjoy it.

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:bottom_sheet_expandable_bar/bottom_sheet_expandable_bar.dart';

...

bottomSheet: BottomBarSheet(
  children: [
    BottomSheetBarIcon(
      icon: Icon(Icons.home),
      color: Colors.redAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.person),
      color: Colors.blueAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.edit),
      color: Colors.blue[800], 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.star),
      color: Colors.orangeAccent, 
      onTap: (){
      },
    ),
  ],
),

...

IMPORTANT: Add this line to your theme to avoid an unexpected behaviour

theme: ThemeData(
  /// Add this line
  bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
),
BottomSheetBarIcon

This widget allow to generate a dynamic icon

Properties

Name Description Required Default
icon Widget to put as button icon False
color Color to indicate icon color False Colors.black
onTap Function to handle button on tap True
BottomBarSheet

This widget allow to generate a bottom bar with the capability to expanto to a bottom sheet

Properties

Name Description Required Default
children List of BottomSheetBarIcon widget to show icons within the bar False
buttonPosition ButtonBottomBarPosition to indicate expandable button position (center, end) False ButtonBottomBarPosition.center
backgroundBarColor Color to indicate bottom bar background color False Colors.white
backgroundColor Color to indicate bottom sheet color False Colors.white
showExpandableButton Boolean value to indicate when to show or hide expandable button False False
innerChild Widget to show into the bottom sheet False
bottomRadius Double value to indicate the corners radius for the bottom bar False 50.0
bottomBarHeight Double value to indicate the bottom bar height False 60.0
bottomBarWidth Double value to indicate the bottom bar height False Screen width * 0.9
duration Duration between show or hide the bottom sheet False 250 milliseconds
bottomSheetHeight Double value to indicate the bottom sheet height False Screen height * 0.75
iconExpand Icon to show into the expandable button False Icon(Icons.navigation)
iconColor Expandable button color False Colors.green
onClose Function to call when bottom sheet is closed False (){}
currentIndex Integer value to indicatet which tab is selected False 0
curve Curve to use on enter bottom sheet animation False Curves.ease
Expandable button at center

Expandable button at end

As a simple navigation bar

Kategorien

Untere Navigationsleiste

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.