cupertino_tabbar

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein anpassbares und einfaches Flutter-Widget, das die iOS 13-Stil-Tabs nachahmt und eine native Erfahrung über Plattformen hinweg bietet. Es unterstützt reibungslose Animationen, benutzerdefinierte Symbole, Beschriftungen und Gestaltungsoptionen, um modernen iOS-Designprinzipien zu entsprechen. Das Widget ist leichtgewichtig und einfach zu integrieren und eignet sich daher ideal für Apps, die auf Android und anderen Plattformen eine konsistente iOS-Ästhetik verfolgen. Besonders nützlich für navigationsintensive Anwendungen, die eine saubere, minimale Tab-Schnittstelle benötigen.

Anwendungsfälle

iOS-ähnliche Navigation in plattformübergreifenden Anwendungen
Benutzerdefinierte Tab-Leisten mit animierten Übergängen
Einfache, aber elegante Bottom-Navigation
Apps für konsistente iOS-Nutzererfahrung
Standard-TabBar durch verbesserte visuelle Elemente ersetzen

Hauptmerkmale

Nachahmung des iOS 13-Designs
Hochgradig anpassbare Erscheinung
Glatte Animationsunterstützung
Unterstützt Symbole und Beschriftungen
Plattformübergreifende Kompatibilität
Einfache Integration in bestehende Flutter-Projekte

Geeignet für

Entwickler, die native iOS-Benutzeroberflächenkomponenten suchen
Projekte, die eine minimalistische Tab-Navigation erfordern
Plattformübergreifende Apps mit Fokus auf iOS-Design
Teams, die visuelle Konsistenz priorisieren
Flutter-Anfänger erkunden die Anpassung der Registerkartenleiste

Hinweise

Beschränkt auf iOS 13 Ästhetik-Stil
Kann zusätzliche Stilisierung für nicht-iOS-Plattformen erfordern
Nicht geeignet für komplexe Tab-Layouts
Am besten in Verbindung mit CupertinoTheme verwendet
Möglicher Leistungseinbruch bei vielen Tabs

Original-README

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

A highly customisable and simple widget for having iOS 13 style tab bars.

It is highly recommended to read the documentation and run the example project on a real device to fully understand and inspect the full range of capabilities.

Media | Description | Installation | How-to-Use

Recent

[useShadow] is added. If set to true, a shadow will be displayed under the indicator that is much more similar to the actual iOS version. See Media for examples.
[allowScrollable], [fittedWhenScrollable], [animateWhenScrollable], [animateUntilScrolled], [outerHorizontalPadding] and [outerVerticalPadding] are added. These all work towards making an easy-to-use scrollable tab bar. Please refer to the documentation and the examples for instructions and see Media for examples.

Warning

Variables previously named as [horizontalPadding], [verticalPadding] and [expand] are now named [innerHorizontalPadding], [innerVerticalPadding] and [allowExpand].

Media

Watch on Youtube:

v1.1.0

v1.0.0

Description

This is a highly customisable and simple widget for having iOS 13 style tab bars.

How-to-Use

Simply create a CupertinoTabBar as shown in the example:

CupertinoTabBar(
  Colors.black                  //_backgroundColor
  Colors.white                  //_foregroundColor
  [...],                        //_widgets
  cupertinoTabBarValueGetter,   //_valueGetter
  (int index) {                 //_onTap
    setState(() {
      cupertinoTabBarValue = index;
    });
  },
  {Key key,
  useSeparators             : false,
  innerHorizontalPadding    : 10.0,
  innerVerticalPadding      : 10.0,
  borderRadius              : const BorderRadius.all(const Radius.circular(10.0)),
  curve                     : Curves.linearToEaseOut,
  duration                  : const Duration(milliseconds: 350),
  allowExpand               : false,
  allowScrollable           : false,
  fittedWhenScrollable      : false,
  animateWhenScrollable     : false,
  animateUntilScrolled      : false,
  outerHorizontalPadding    : 10.0,,
  outerVerticalPadding      : 0})
)

int cupertinoTabBarValue = 0;
int cupertinoTabBarValueGetter() => cupertinoTabBarValue;

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

Do not set both [allowExpand] and [allowScrollable] to true.

Notes

Any help, suggestion or criticism is appreciated!

Cheers.

Pakete, Repositories und App-Kategorien suchen