Einen Button ausgrauen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 21 von 34.

In „Dein erster Button“ hat onPressed: null eine Schaltfläche ausgegraut. Jetzt kannst du während der Laufzeit der App entscheiden: Weise onPressed die Funktion zu, wenn die Schaltfläche sinnvoll ist, und null, wenn nicht.

ElevatedButton(
  onPressed: _count > 0 ? _decrease : null,
  child: const Text('Minus'),
)

Der Ausdruck ? : wählt zwischen der Methode und null. Jedes Mal, wenn setState den Bildschirm erneut aufbaut, wird der Vergleich erneut ausgeführt, sodass die Schaltfläche von selbst ausgegraut wird und wieder aktiv ist.

Eine ausgegraute Schaltfläche zeigt den Leuten, warum nichts passieren würde, bevor sie darauf tippen. Eine Schaltfläche, die sich drücken lässt, aber still und leise nichts tut, wirkt einfach kaputt.

Aufgabe

Einfach

Der Warenkorb kann weniger als null Artikel enthalten. Deaktiviere die Schaltfläche Remove, wenn keine Artikel vorhanden sind, sodass sie nur gedrückt werden kann, wenn _items größer als 0 ist.

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _items = 0;

  void _add() {
    setState(() {
      _items++;
    });
  }

  void _remove() {
    setState(() {
      _items--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Cart')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Items: $_items', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            ElevatedButton(onPressed: _remove, child: const Text('Remove')),
          ],
        ),
      ),
    );
  }
}