Pakete, Repositories und App-Kategorien suchen

Cover von flutter_awesome_bottom_sheet
Paketdetailsv0.0.2

flutter_awesome_bottom_sheet

Zeigen Sie schnell und einfach eine tolle Bottom-Sheet als Bestätigungsdialog an.

AndroidiOSWebmacOSWindowsLinux
30-Tage-Downloads
35
Likes
26
Pub-Punkte
125

Paket installieren

flutter pub add flutter_awesome_bottom_sheet

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das Entwicklern ermöglicht, visuell ansprechende Bottom-Sheets als Bestätigungsdialoge schnell und einfach anzuzeigen. Für Einfachheit und schnelle Implementierung konzipiert, verbessert es die Benutzerinteraktion durch flüssige Animationen und anpassbare Layouts. Ideal für Anwendungsfälle, bei denen eine Benutzerbestätigung oder schnelle Aktionen erforderlich sind, ohne die aktuelle Bildschirmansicht verlassen zu müssen. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und gewährleistet ein konsistentes Verhalten über Geräte hinweg.

Anwendungsfälle

  • Benutzerbestätigungsdialoge
  • Schnellaktionen-Menüs
  • Formularübermittlungs-Eingaben
  • Modale Feedback-Oberflächen
  • Onboarding-Schrittsanzeiger

Hauptmerkmale

  • Einfach zu verwendende API
  • Anpassbare Animationen
  • Plattformübergreifende Unterstützung
  • Eingebaute Bestätigungsstile
  • Leicht und schnell

Geeignet für

  • Entwickler, die eine schnelle Bottom-Sheet-Integration suchen
  • Projekte, die Bestätigungsdialoge erfordern
  • Apps mit mobilen-first UI-Design
  • Teams, die Entwicklungsbeschleunigung priorisieren
  • Multiplattform-Flutter-Anwendungen

Hinweise

  • Eingeschränkte Anpassung über die grundlegende Gestaltung hinaus
  • Kann zusätzliche Stilisierung für komplexe Designs erfordern
  • Am besten geeignet für einfache Bestätigungsabläufe
  • Nicht ideal für Formulare mit umfangreichen Daten-Eingaben
  • Abhängig von externen Abhängigkeiten für erweiterte Funktionen

Original-README

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

Flutter Awesome Bottom Sheet

Features

  • Custom child widgets
  • Adaptive design

Supported platforms

  • Flutter Android
  • Flutter iOS
  • Flutter web
  • Flutter desktop
  • Flutter macOS
  • Flutter linux

Installation

Add flutter_awesome_bottom_sheet: <later-version> to your pubspec.yaml dependencies. And import it:

import 'package:flutter_awesome_bottom_sheet/flutter_awesome_bottom_sheet.dart';
How to Use

How to Use

create object

final AwesomeBottomSheet _awesomeBottomSheet = AwesomeBottomSheet();

Example

Simple Awesome Sheet

 _awesomeBottomSheet.show(
      context: context,
      title: const Text("Lorem Ipsum"),
      description: const Text("Flutter Awesome Bottom sheet content here..."),
      color: CustomSheetColor(
        mainColor: const Color(0xff2979FF),
        accentColor: const Color(0xff0D47A1),
        iconColor: Colors.white,
      ),
      positive: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'CANCEL',
      ),
    );

Add Buttons

 _awesomeBottomSheet.show(
     ...
      positive: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'DELETE',
      ),
      negative: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'CANCEL',
      ),
    );

Add Icons in content and action button


 _awesomeBottomSheet.show(
     ...
      icon: Icons.signal_cellular_connected_no_internet_4_bar,
      positive: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'OPEN SETTING',
        icon: Icons.settings,
      ),
      negative: AwesomeSheetAction(
        onPressed: () {
          Navigator.of(context).pop();
        },
        title: 'CANCEL',
      ),
    );

Custom color

 _awesomeBottomSheet.show(
      ...
      color: CustomSheetColor(
        mainColor: Colors.white,
        accentColor: const Color(0xff5A67D8),
        iconColor: const Color(0xff5A67D8),
      ),
      ...
    ); 

Screenshot

Simple Action Icon
simple action icon

Kategorien

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.