Text and Outlined Buttons

Part of the Making It Interactive section of Coddy's Flutter journey. Lesson 3 of 34.

Flutter has three buttons that work the same way, with onPressed: and child:. They differ in how loud they look:

ElevatedButton: filled with color. Use it for the main action, like Save.
OutlinedButton: a border and no fill. A second choice, like Preview.
TextButton: only the text. The quietest, for actions like Cancel.

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

A screen with one loud button and quieter ones around it tells people what to press first. To change a button's kind, change only its name.

Challenge

Easy

All three buttons are ElevatedButtons. Keep Save as it is, make Preview an OutlinedButton and Cancel a TextButton.

Try it yourself

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