Ein Kästchen ankreuzen

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

Ein Checkbox funktioniert wie ein Switch: einen value:, der gezeichnet wird, und ein onChanged, auf das du mit setState reagierst.

Checkbox(
  value: _agreed,
  onChanged: (bool? value) {
    setState(() {
      _agreed = value ?? false;
    });
  },
)

Ein Unterschied: Sein Wert ist ein bool?, also ein bool oder null. Ein Kontrollkästchen kann einen dritten, leeren Zustand haben, den du hier nicht verwenden wirst. Da _agreed ein gewöhnlicher bool ist, wandelst du ein mögliches null mit ?? in false um, wie du es auch mit int.tryParse getan hast.

Ein Kontrollkästchen ist oft das Element, mit dem sich eine Schaltfläche betätigen lässt: Aktiviere „Ich stimme zu“, und „Weiter“ ist nicht mehr grau.

Aufgabe

Einfach

Ermögliche das An- und Abwählen des Kontrollkästchens: Speichere seinen Wert in _agreed.
Zeige Continue ausgegraut an, bis das Kästchen angekreuzt 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> {
  bool _agreed = false;

  void _continue() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Welcome!')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rules')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Checkbox(
                  value: _agreed,
                  onChanged: (bool? value) {},
                ),
                const Text('I agree to the rules'),
              ],
            ),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _continue, child: const Text('Continue')),
          ],
        ),
      ),
    );
  }
}