Flutter: Eingabe-Widgets und Statusanzeigen

Flutter bietet eine reichhaltige Widget-Bibliothek, um Eingaben vom Nutzer entgegenzunehmen und den Zustand der Anwendung anzuzeigen. In diesem Beitrag sehen wir uns die am häufigsten genutzten Auswahlelemente und Statusanzeigen an.

Live-Demo

Sie können diese Widgets im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Auswahl-Widgets

1. Switch

Dient dazu, eine Einstellung ein- oder auszuschalten.

bool isSwitched = false;

Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
  activeTrackColor: Colors.lightGreenAccent,
  activeColor: Colors.green,
)

Häufiger ist die Verwendung innerhalb eines ListTile:

SwitchListTile(
  title: Text('Enable Notifications'),
  subtitle: Text('Receive app notifications'),
  value: isSwitched,
  onChanged: (value) => setState(() => isSwitched = value),
)

2. Checkbox

Dient zur Auswahl mehrerer Optionen.

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value!;
    });
  },
)

Auch hier ist die Verwendung mit CheckboxListTile samt Beschriftung praktischer.

3. Radio-Button

Dient dazu, aus einer Gruppe genau eine Option zu wählen.

int selectedValue = 1;

Column(
  children: [
    RadioListTile(
      title: Text("Option A"),
      value: 1,
      groupValue: selectedValue,
      onChanged: (val) => setState(() => selectedValue = val!),
    ),
    RadioListTile(
      title: Text("Option B"),
      value: 2,
      groupValue: selectedValue,
      onChanged: (val) => setState(() => selectedValue = val!),
    ),
  ],
)

4. Slider

Dient dazu, einen Wert aus einem Bereich zu wählen.

double currentSliderValue = 20;

Slider(
  value: currentSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: currentSliderValue.round().toString(),
  onChanged: (double value) {
    setState(() {
      currentSliderValue = value;
    });
  },
)

5. ToggleButtons

Eine Auswahlgruppe aus nebeneinander angeordneten Buttons.

List<bool> isSelected = [false, true, false];

ToggleButtons(
  children: [
    Icon(Icons.format_bold),
    Icon(Icons.format_italic),
    Icon(Icons.format_underlined),
  ],
  isSelected: isSelected,
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
)

Fortschrittsanzeigen

Zeigen dem Nutzer, dass ein Vorgang läuft.

1. CircularProgressIndicator

Wird meist beim Laden einer Seite oder bei Vorgängen mit unbestimmter Dauer eingesetzt.

// Indeterminate (spins continuously)
const CircularProgressIndicator()

// Determinate (50% full)
const CircularProgressIndicator(value: 0.5)

2. LinearProgressIndicator

Wird häufiger oben oder unten eingesetzt, etwa beim Herunterladen von Dateien.

const LinearProgressIndicator()

Hinweis zu WebView

Wenn Sie Webseiten innerhalb Ihrer Anwendung anzeigen möchten, können Sie das Paket webview_flutter verwenden. Es ist keine native Komponente, sondern ein vom Flutter-Team entwickeltes Plugin.

dependencies:
  webview_flutter: ^4.0.0

Verwendung (mit Controller):

// WebViewWidget usage (webview_flutter 4.x+)
WebViewWidget(controller: controller)

WebView eignet sich ideal, um dynamische Webinhalte wie „Über uns“ oder „Datenschutzerklärung“ anzuzeigen.

Zusammenfassung

Diese Widgets erhöhen die Interaktivität Ihrer Anwendung:

• Switch/Checkbox: Ja/Nein oder Mehrfachauswahl.
• Radio: Einzelauswahl.
• Slider: Auswahl eines Werts aus einem Bereich.
• ProgressIndicator: Ladezustand.

Die Wahl des passenden Eingabe-Widgets wirkt sich unmittelbar auf die Nutzererfahrung (UX) aus.