Paketdetailsv3.2.0

flutter_advanced_segment

Ein erweiterter Segment-Widget, der mit einer Vielzahl von Eigenschaften vollständig angepasst werden kann. Probieren Sie es einfach aus und genießen Sie es!

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 7120
Likes: 118
Pub-Punkte: 150

Paket installieren

flutter pub add flutter_advanced_segment

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein hochgradig anpassbarer Segment-Widget für Flutter, der entwickelt wurde, um die tabbasierte Navigation durch umfangreiche Gestaltungs- und Konfigurationsoptionen zu verbessern. Unterstützt alle wichtigen Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Entwickler können das Aussehen und Verhalten von Segmenten mit zahlreichen Eigenschaften anpassen, was eine nahtlose Integration in unterschiedliche UI-Designs ermöglicht. Ideal für die Erstellung intuitiver, interaktiver Oberflächen mit reibungslosen Übergängen und responsive Rückmeldungen.

Anwendungsfälle

Benutzerdefinierte Tab-Navigation
Formularfeldgruppierung
Dynamische Inhaltsumschaltung
Benutzereinstellungsauswahl
Interaktive Dashboard-Filter
Mehrzustands-Auswahlsteuerung

Hauptmerkmale

Völlig anpassbare Erscheinung
Plattformübergreifende Kompatibilität
Glatte Übergangsanimationen
Umfangreiche Eigenschaftskonfiguration
Unterstützung für horizontale und vertikale Layouts
Anpassungsfähigkeit des responsiven Designs

Geeignet für

Entwickler, die komplexe Benutzeroberflächen erstellen
Designer, die flexible Tab-Komponenten benötigen
Apps, die dynamische Segmentinteraktionen erfordern
Projekte mit strenger Benutzeroberflächenkonsistenz
Teams, die Flutter für Multiplattform-Apps verwenden

Hinweise

Könnte zusätzliche Kenntnisse in Bezug auf Styling erfordern
Leistungsbeeinträchtigung bei vielen Segmenten
Eingeschränkte integrierte Themen
Nicht für sehr große Datensätze optimiert
Erfordert sorgfältige Zustandsverwaltung
Potenzielle Komplexität bei verschachtelten Implementierungen

Original-README

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

flutter_advanced_segment

An advanced segment widget, that can be fully customized with bunch of properties, just try it and enjoy!

Examples

Regular Segment

final _controller = ValueNotifier('all');
//...
AdvancedSegment(
  controller: _controller,
  segments: const {
    'all': 'All',
    'starred': 'Starred',
  },
),

Colorized Segment

AdvancedSegment(
  controller: _controller,
  segments: const {'all': 'All', 'starred': 'Starred'},
  decoration: BoxDecoration(
    color: const Color(0xFFFF6B35),
    borderRadius: BorderRadius.circular(4),
  ),
  sliderColor: const Color(0xFFD63B0E),
  activeStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.w600,
  ),
  inactiveStyle: TextStyle(
    color: Colors.white.withValues(alpha: 0.7),
  ),
),

Gradient Decoration

AdvancedSegment(
  controller: _controller,
  segments: const {'all': 'All', 'starred': 'Starred'},
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Color(0xFFFF2D55), Color(0xFFFF9500)],
    ),
    borderRadius: BorderRadius.circular(16),
  ),
  sliderColor: Colors.white,
  activeStyle: const TextStyle(
    color: Color(0xFFFF2D55),
    fontWeight: FontWeight.w700,
  ),
  inactiveStyle: TextStyle(
    color: Colors.white.withValues(alpha: 0.85),
  ),
),

Custom Slider Decoration

AdvancedSegment(
  controller: _controller,
  segments: const {'all': 'All', 'starred': 'Starred'},
  decoration: BoxDecoration(
    color: const Color(0xFF2C2C2E),
    borderRadius: BorderRadius.circular(50),
  ),
  sliderDecoration: BoxDecoration(
    color: const Color(0xFFBF5AF2),
    borderRadius: BorderRadius.circular(50),
    border: Border.all(
      color: const Color(0xFFDA8FFF),
      width: 1.5,
    ),
  ),
  activeStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.w700,
  ),
  inactiveStyle: TextStyle(
    color: Colors.white.withValues(alpha: 0.5),
  ),
),

AdvancedSegment Parameters

Parameter	Description	Type	Default
`controller`	Controls segments selection	ValueNotifier
`segments`	Map of presented segments	Map<K, V>	required
`activeStyle`	Active segment text style	TextStyle	fontWeight: FontWeight.w600
`inactiveStyle`	Inactive segment text style	TextStyle
`decoration`	Layout decoration (color, border, borderRadius, gradient, etc.)	BoxDecoration	color: 0x42000000, borderRadius: 8.0
`sliderColor`	Color of the slider thumb	Color	Colors.white
`sliderOffset`	Gap between slider and layout	double	2.0
`itemPadding`	Padding of each item	EdgeInsets	EdgeInsets.symmetric(h: 15, v: 10)
`animationDuration`	Selection animation duration	Duration	Duration(milliseconds: 250)
`shadow`	Slider shadow	List<BoxShadow>	BoxShadow(blurRadius: 8.0)
`sliderDecoration`	Custom slider decoration (overrides sliderColor, borderRadius, shadow)	BoxDecoration
`enableDrag`	Whether drag gesture is enabled	bool	true

Kategorien

Registerkarte

Quell-Repository

alex-melnyk/flutter_advanced_segment

flutter_advanced_segment

☆ 23 Sterne⑂ 11 Forks

DartSwiftfluttersegment

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.