Przyciski tekstowe i konturowe

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 3 z 34.

Flutter ma trzy przyciski, które działają tak samo, z onPressed: i child:. Różnią się tym, jak bardzo rzucają się w oczy:

ElevatedButton: wypełniony kolorem. Użyj go do głównego działania, takiego jak zapisanie.
OutlinedButton: z obramowaniem i bez wypełnienia. Drugi wybór, taki jak podgląd.
TextButton: tylko tekst. Najmniej rzucający się w oczy, do działań takich jak anulowanie.

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

Ekran z jednym wyrazistym przyciskiem i mniej rzucającymi się w oczy przyciskami wokół niego podpowiada użytkownikom, co nacisnąć najpierw. Aby zmienić rodzaj przycisku, zmień tylko jego nazwę.

Wyzwanie

Łatwy

Wszystkie trzy przyciski to przyciski typu ElevatedButton. Pozostaw Save bez zmian, zmień Preview na OutlinedButton, a Cancel na TextButton.

Spróbuj swoich sił

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')),
            ],
          ),
        ),
      ),
    );
  }
}