Ein und aus mit einem Schalter

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

Ein Switch ist der Ein-Aus-Schalter, den du aus den Telefoneinstellungen kennst. Er zeigt einen booleschen Wert an und teilt dir mit, wenn jemand ihn umschaltet:

Switch(
  value: _wifi,
  onChanged: (bool value) {
    setState(() {
      _wifi = value;
    });
  },
)

value: legt fest, wie er dargestellt wird: bei true eingeschaltet, bei false ausgeschaltet. onChanged erhält den neuen Wert, wenn du darauf tippst.

Der Schalter bewegt sich nicht von selbst. Ein Tippen ruft nur onChanged auf; du speicherst den neuen Wert mit setState, der Bildschirm wird erneut aufgebaut und der Schalter an seiner neuen Position dargestellt. Vergisst du das, springt der Schalter bei jedem Tippen zurück.

Aufgabe

Einfach

Sorge dafür, dass der Schalter funktioniert: Speichere den neuen Wert mit setState in _dark.
Gib dem Scaffold bei aktiviertem dunklem Modus die backgroundColor Colors.black und bei deaktiviertem Modus Colors.white. Die Beschriftung ändert ihre Farbe bereits.

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 _dark = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Dark mode',
              style: TextStyle(fontSize: 20, color: _dark ? Colors.white : Colors.black),
            ),
            const SizedBox(width: 12),
            Switch(
              value: _dark,
              onChanged: (bool value) {},
            ),
          ],
        ),
      ),
    );
  }
}