Botones de texto y contorno

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 3 de 34.

Flutter tiene tres botones que funcionan de la misma manera, con onPressed: y child:. Se diferencian en lo llamativos que se ven:

ElevatedButton: relleno de color. Úsalo para la acción principal, como Guardar.
OutlinedButton: un borde y sin relleno. Una segunda opción, como Vista previa.
TextButton: solo el texto. El más discreto, para acciones como Cancelar.

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

Una pantalla con un botón llamativo y otros más discretos a su alrededor indica a las personas qué deben pulsar primero. Para cambiar el tipo de botón, cambia solo su nombre.

Desafío

Fácil

Los tres botones son ElevatedButton. Mantén Save tal como está, convierte Preview en un OutlinedButton y Cancel en un TextButton.

Pruébalo tú mismo

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