テキストボタンとアウトラインボタン

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 3/34。

Flutterには、onPressed:とchild:を使う、同じように動作するボタンが3種類あります。見た目の目立ちやすさが異なります。

ElevatedButton：色で塗りつぶされています。保存などの主要なアクションに使います。
OutlinedButton：枠線があり、塗りつぶしはありません。プレビューなど、2番目の選択肢に使います。
TextButton：テキストだけのボタンです。キャンセルなどのアクションに使う、最も控えめなボタンです。

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

目立つボタンが1つあり、その周りに控えめなボタンがある画面は、最初にどれを押せばよいかをユーザーに伝えます。ボタンの種類を変えるには、名前だけを変更します。

チャレンジ

簡単

3つのボタンはすべて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')),
            ],
          ),
        ),
      ),
    );
  }
}