Text- und umrandete Schaltflächen

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

Flutter hat drei Schaltflächen, die auf dieselbe Weise mit onPressed: und child: funktionieren. Sie unterscheiden sich darin, wie auffällig sie aussehen:

ElevatedButton: farbig ausgefüllt. Verwende sie für die Hauptaktion, etwa zum Speichern.
OutlinedButton: mit Rahmen und ohne Füllung. Eine zweite Wahl, etwa für die Vorschau.
TextButton: nur der Text. Am unauffälligsten, für Aktionen wie Abbrechen.

OutlinedButton(onPressed: () {}, child: Text('Preview'))
TextButton(onPressed: () {}, child: Text('Cancel'))

Ein Bildschirm mit einer auffälligen Schaltfläche und unauffälligeren Schaltflächen daneben zeigt den Leuten, worauf sie zuerst drücken sollen. Um die Art einer Schaltfläche zu ändern, ändere nur ihren Namen.

Aufgabe

Einfach

Alle drei Schaltflächen sind ElevatedButtons. Lass Save unverändert, mache Preview zu einem OutlinedButton und Cancel zu einem TextButton.

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: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Save')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Preview')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Cancel')),
            ],
          ),
        ),
      ),
    );
  }
}