Pulsanti di testo e con contorno

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 3 di 34.

Flutter ha tre pulsanti che funzionano allo stesso modo, con onPressed: e child:. Si differenziano per quanto risaltano:

ElevatedButton: riempito di colore. Usalo per l’azione principale, come Salvare.
OutlinedButton: un bordo e nessun riempimento. Una seconda scelta, come Anteprima.
TextButton: solo il testo. Il più discreto, per azioni come Annulla.

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

Una schermata con un pulsante ben evidente e altri più discreti intorno indica alle persone cosa premere per prima cosa. Per cambiare il tipo di pulsante, cambia solo il suo nome.

Sfida

Facile

Tutti e tre i pulsanti sono ElevatedButton. Lascia Save così com'è, rendi Preview un OutlinedButton e Cancel un TextButton.

Provalo tu

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