Deine erste Schaltfläche

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

Bisher haben deine Apps nur Dinge angezeigt. In diesem Abschnitt lernen sie, darauf zu reagieren – angefangen mit einer Schaltfläche.

ElevatedButton(
  onPressed: () {},
  child: Text('Start'),
)

child: ist das, was die Schaltfläche anzeigt, normalerweise ein Text. onPressed: legt fest, was passiert, wenn jemand darauf tippt.

() {} ist eine Funktion ohne Namen: ein kleines Stück Code, das die Schaltfläche speichert und bei jedem Tippen ausführt. Der Code steht zwischen den geschweiften Klammern. Diese Funktion ist leer, deshalb bewirkt ein Tippen noch nichts. Die Schaltfläche kann aber bereits gedrückt werden.

Mit onPressed: null ist die Schaltfläche ausgegraut und kann nicht gedrückt werden. null bedeutet „kein Wert“: Es gibt keinen auszuführenden Code.

Aufgabe

Einfach

Die App zeigt das Wort Start. Verwandle es in einen ElevatedButton, der gedrückt werden kann und Start als untergeordnetes Element hat. Für onPressed genügt eine leere Funktion.

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: Scaffold(
        body: Center(
          child: Text('Start'),
        ),
      ),
    );
  }
}