Botões de texto e contorno

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 3 de 34.

O Flutter tem três botões que funcionam da mesma forma, com onPressed: e child:. Eles diferem pelo destaque visual:

ElevatedButton: preenchido com cor. Use-o para a ação principal, como Salvar.
OutlinedButton: com contorno e sem preenchimento. Uma segunda opção, como Pré-visualizar.
TextButton: apenas o texto. O mais discreto, para ações como Cancelar.

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

Uma tela com um botão em destaque e outros mais discretos ao redor indica às pessoas o que pressionar primeiro. Para mudar o tipo de botão, altere apenas o nome.

Desafio

Fácil

Os três botões são ElevatedButton. Mantenha Save como está, transforme Preview em um OutlinedButton e Cancel em um TextButton.

Experimente você mesmo

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