Текстовые и контурные кнопки

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 3 из 34.

В Flutter есть три кнопки, которые работают одинаково и используют onPressed: и child:. Они различаются тем, насколько заметно выглядят:

ElevatedButton: залита цветом. Используй её для главного действия, например сохранения.
OutlinedButton: с рамкой, без заливки. Второй вариант, например предварительный просмотр.
TextButton: только текст. Самая незаметная, подходит для таких действий, как отмена.

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

Экран с одной заметной кнопкой и менее заметными кнопками вокруг неё подсказывает людям, на что нажать сначала. Чтобы изменить тип кнопки, измени только её название.

Задание

Легко

Все три кнопки имеют тип ElevatedButton. Оставь Save без изменений, сделай Preview кнопкой OutlinedButton, а Cancel — кнопкой TextButton.

Попробуйте сами

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