Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von sleek_button
Paketdetailsv0.2.0

sleek_button

Eine einfache, aber dennoch anpassbare Schaltfläche.

pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
13
Likes
19
Pub-Punkte
40

Paket installieren

flutter pub add sleek_button

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Sleek Button ist ein leichtgewichtiges, anpassbares Flutter-Widget, das entwickelt wurde, um mit minimalem Aufwand elegante und moderne Schaltflächen zu erstellen. Es bietet eine saubere API zum Stylen von Schaltflächen mit verschiedenen Effekten wie Animationen, Farbverläufen und Schatten. Ideal für Entwickler, die einen einfachen, aber optisch ansprechenden Button-Component ohne schwere Abhängigkeiten suchen. Das Paket unterstützt die Anpassung von Größe, Farbe, Form und Welleneffekten und eignet sich sowohl für grundlegende als auch fortgeschrittene UI-Anforderungen. Es lässt sich nahtlos in jedes Flutter-Projekt integrieren.

Anwendungsfälle

  • Stilisierte Schaltflächen in mobilen Apps erstellen
  • Animierte Button-Effekte hinzufügen
  • Formulare mit ansprechenden Eingabesteuerelementen erstellen
  • Entwicklung interaktiver Benutzeroberflächenelemente
  • Benutzerdefinierte Button-Themen implementieren
  • Verbesserung der Benutzeroberflächengestaltung

Hauptmerkmale

  • Hochgradig anpassbare Erscheinung
  • Eingebaute Animationen und Welleneffekte
  • Unterstützung für Gradienten und Schatten
  • Einfaches und intuitives API
  • Leichtgewichtig und schnelle Leistung
  • Einfache Integration in bestehende Flutter-Projekte

Geeignet für

  • Flutter-Anfänger, die leicht zu verwendende Widgets suchen
  • Entwickler, die eine schnelle Button-Stilisierung wollen
  • Projekte, die polierte UI-Komponenten erfordern
  • Auf visuelle Attraktivität und Interaktivität fokussierte Apps
  • Teams, die ein konsistentes Button-Design über Bildschirme hinweg anstreben

Hinweise

  • Beschränkt auf button-spezifische Funktionalität
  • Keine integrierte Unterstützung für komplexe Zustände wie Laden oder Deaktiviert
  • Kann zusätzlichen Code für erweiterte Interaktionen erfordern
  • Nicht ideal für hochdynamische oder datengetriebene Button-Logik

Original-README

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

A simple but yet customizable button.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    sleek_button: <version>

Quick start

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: SleekButtonStyle.flat(
        color: swatch.primary,
        inverted: true,
        rounded: true,
        size: SleekButtonSize.big,
        context: context,
    ),
    child: const Icon(Icons.format_bold),
)

Usage

Widget
SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: const Text('Save'),,
)

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
            const Icon(Icons.check),
            const SizedBox(width: 6),
            const Text('Save'),
        ],
    ),
)

If the direct child is an Icon, the button will be a square.

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: const Icon(Icons.check),
)
Styles
Flat
SleekButtonStyle.flat(
    context: context,
)

SleekButtonStyle.flat(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.flat(
    inverted: true,
    context: context,
)

SleekButtonStyle.flat(
    rounded: true,
    context: context,
)

SleekButtonStyle.flat(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)
Outlined
SleekButtonStyle.outlined(
    context: context,
)

SleekButtonStyle.outlined(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.outlined(
    inverted: true,
    context: context,
)

SleekButtonStyle.outlined(
    rounded: true,
    context: context,
)

SleekButtonStyle.outlined(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)
Light
SleekButtonStyle.light(
    context: context,
)

SleekButtonStyle.light(
    size = SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.light(
    rounded = true,
    context: context,
)

SleekButtonStyle.light(
    size: SleekButtonSize.medium,
    rounded = true,
    context: context,
)
Colors

If you give a color, all variants (dark, light, invert) will be calculated with the help of the derived_colors package.

SleekButtonStyle.flat(
    color: const Color(0xFF)
    context: context,
)

 SleekButtonStyle.light(
    color: const Color(0xFFFFC369),
    context: context,
)

SleekButtonStyle.outlined(
    color: const Color(0xFF323232),
    context: context,
)
Theme

You can customize the default appearance of the button by adding a SleekButtonTheme in the tree. If a Theme is in the tree, it will use it tu deduce a default theme.

SleekButtonTheme(
    data: const SleekButtonThemeData(
        padding: 24,
        textStyle: TextStyle(fontSize: 11),
        cornerRadius: 8.0,
        iconTheme: IconThemeData(size: 10),
        fill: Color(0xFFFF0000),
        borderWidth: 2,
    ),
    child: app,
)

Thanks

Thanks to the bulma framework team for the inspiration.

Kategorien

Schaltfläche und Fortschrittschaltfläche

Abhängigkeiten

Abhängigkeiten 3 Einträge

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.