switch_up

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

SwitchUp ist ein hochgradig anpassbarer animierter Schieberegler für Flutter-Anwendungen. Er ermöglicht Entwicklern, das Erscheinungsbild des Schalters durch verstellbare Breite, Farben, Textbeschriftungen, Eckradius und sanfte Animationseffekte anzupassen. Das Widget behält seinen Auswahlstatus automatisch bei und sorgt so für nahtlose Benutzerinteraktionen. Durch seine einfache und flexible Gestaltung lässt es sich problemlos in Formulare, Einstellungspanels oder jede Benutzeroberfläche mit Schaltfunktion integrieren. Seine saubere API unterstützt sowohl Helligkeits- als auch Dunkelmodus-Anpassung und macht sie somit ideal für moderne App-Designs.

Anwendungsfälle

Benutzereinstellungstoggle
Einstellungsschalter
Formular-Eingabesteuerelemente
Dunkelmodus aktivieren/deaktivieren
Ein/Aus-Zustandsanzeigen

Hauptmerkmale

Vollständig anpassbare Darstellung
Glatte Animationsübergänge
Zustandspersistenz
Einstellbare Breite und Eckradius
Unterstützt benutzerdefinierte Textbezeichnungen
Leicht- und Dunkelmodus-fähig

Geeignet für

Einfache Toggle-Schnittstellen
Anpassbare Benutzeroberflächenkomponenten
Einstellungsbildschirme
Mobile App-Entwicklung
Flutter-Anfänger und Experten

Hinweise

Keine plattformspezifische Integration erwähnt
Beschränkt auf visuelle Anpassung
Keine integrierten Zugänglichkeitsfunktionen festgestellt
Benötigt manuelle Handhabung von Fokus und Semantik

Original-README

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

README

Switch Up

An animated toggle switch which can be fully customized with desired width, colors, text, corner radius, animation etc. It also maintains selection state.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:  ...  switch_up: latest_version

Import it:

import 'package:switch_up/switch_up.dart';

Usage Examples

// Here, default theme color are used for selected item.
SwitchUp<String>(
  backgroundColor: Colors.grey.shade200,
  items: const <String>['Home', 'Chat', 'Settings'],
  onChanged: (String value) {
    print(value);
  },
  value: 'Settings',
),

Switch Up with custom Height, Color and Animation

SwitchUp(
  backgroundColor: Colors.grey.shade200,
  color: Colors.amber,
  radius: 0,
	height: 50,
	curves: Curves.easeInOutBack,
  items: const ['Active', 'Pending'],
  onChanged: (value) {
    print(value);
  },
  value: 'Pending',
),

Switch Up with a Gradient Color

SwitchUp(
  gradient: const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFF941F37),
      Color(0xFF590012),
    ],
  ),
  curves: Curves.bounceOut,
  backgroundColor: Colors.grey.shade200,
  items: const ['Male', 'Female', 'Other'],
  onChanged: (value) {
    print(value);
  },
  value: 'Female',
),

SwitchUp(
  backgroundColor: Colors.grey.shade200,
  radius: 40,
  gradient: const RadialGradient(
    radius: 10,
    colors: [
      Color(0xFF941F37),
      Color(0xFF590012),
    ],
  ),
  curves: Curves.easeInOutQuart,
  items: const ['Normal', 'Bold', 'Italic'],
  onChanged: (value) {
    log(value);
  },
  value: 'Bold',
),

Switch Up with Custom Models

// Add toString() to your Custom model class
//   @override
//   String toString() {
//     return name;
//   } 
SwitchUp<States>(
  backgroundColor: Colors.pink.withOpacity(.1),
  radius: 10,
  height: 60,`
  gradient: const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFFFC466B),
      Color(0xFF3F5EFB),
    ],
  ),
  curves: Curves.easeInOutQuart,
  items: states,
  onChanged: (States value) {
    if (kDebugMode) {
      print(value);
    }
  },
  value: states[2],
),

With icons, text and different active background colors

Example code with explanation

Pakete, Repositories und App-Kategorien suchen

Paket installieren