【Flutter】ボタン(Button)使い方を3分で解説!(サンプルコードあり)

Flutterボタンの使い方

Flutterでボタンの使い方を知りたい。
ElevatedButtonの使い方が分からない。

そこで、今回はFlutterのボタンにおける基本的な使い方サンプルコードアプリ画面で解説します。

この記事で分かること!
  • ElevatedButton、TextButton、OutlinedButtonの使い方
  • IconButtonの使い方
  • FloatingActionButtonの使い方
  • ボタンでよく指定するプロパティ

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【Flutter】button:使い方を覚えておくべき5つのボタン

初心者がFlutterで覚えておくべきボタンは以下の5つです。

  1. TextButton
  2. ElevatedButton
  3. OutlinedButton
  4. IconButton 
  5. FloatingActionButton 

以下のボタンはFlutter2.0から非推奨となり、新しいボタンに変わりましたのは要注意です。

古いボタン古いテーマ設定新しいボタン新しいテーマ設定
FlatButtonButtonThemeTextButtonTextButtonTheme
RaisedButtonButtonThemeElevatedButtonElevatedButtonTheme
OutlineButtonButtonThemeOutlinedButtonOutlinedButtonTheme
引用:Flutter公式「New Buttons and Button Themes」

【Flutter】TextButtonの使い方

Flutterの基本ボタン1つ目はTextButtonです。名前の通りレイアウト上で表示されるのはテキストのみです。

上記画面のTextButtonのサンプルコードは以下の通りです。

TextButton(
 onPressed: () {},
 child: Text("クリック可"),
 style: TextButton.styleFrom(
   textStyle: const TextStyle(fontSize: 30),
   foregroundColor: Colors.blue, // foreground
   fixedSize: Size(200, 200),
   alignment: Alignment.topCenter,
)),
TextButton(
 onPressed: () {
   print('赤クリック!');
 },
 child: Text("クリック可"),
 style: TextButton.styleFrom(
   textStyle: const TextStyle(fontSize: 30),
   foregroundColor: Colors.red, // foreground
   fixedSize: Size(200, 200),
   alignment: Alignment.bottomCenter,
)),
TextButton(
 onPressed: null,
 child: Text("クリック不可"),
 style: TextButton.styleFrom(
  textStyle: const TextStyle(fontSize: 30),
  foregroundColor: Colors.red, // foreground
  fixedSize: Size(200, 200),
)),

TextButtonで知っておきべきプロパティは以下の通りです。

プロパティ指定内容
onPressed必須ボタンクリック時の処理
child必須ボタンに表示するテキスト文字を指定
textStyle任意テキスト文字のサイズ指定
foregroundColor任意テキスト文字の色指定
fixedSize任意テキストボタンのサイズ指定(横*縦)
alignment任意テキスト文字の位置を指定(上中央、下中央、上左寄り、など)

TextButtonのデモ動画

上の動画を見ると分かりますが、onPressednullを指定するとボタンはクリックできません。また、クリックするとボタンサイズが大きくなっているのが分かります。

【Flutter】ElevatedButtonの使い方

Flutterの基本ボタン2つ目はElevatedButtonです。

上記画面のElevatedButtonのサンプルコードは以下の通りです。

                ElevatedButton(
                    onPressed: () {},
                    child: Text("クリック可"),
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 30),
                      foregroundColor: Colors.white, // foreground
                      fixedSize: Size(220, 80),
                      alignment: Alignment.topCenter,
                    )),
                ElevatedButton(
                    onPressed: () {
                      print('赤クリック!');
                    },
                    child: Text("クリック可"),
                    style: TextButton.styleFrom(
                        backgroundColor: Colors.red.shade50,
                        textStyle:
                          const TextStyle(fontSize: 30, color: Colors.green),
                      foregroundColor: Colors.red,
                      // foreground
                      fixedSize: Size(220, 80),
                      alignment: Alignment.bottomCenter,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                    )),
                ElevatedButton(
                    onPressed: null,
                    child: Text("クリック不可"),
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 30),
                      foregroundColor: Colors.red, // foreground
                      fixedSize: Size(220, 80),
                      shape: StadiumBorder(),
                    )),
プロパティ指定内容
onPressed必須クリック時の処理
child必須ボタンに表示するテキスト文字を指定
textStyle任意テキスト文字のサイズ指定
foregroundColor任意テキスト文字の色指定
fixedSize任意テキストボタンのサイズ指定(横*縦)
alignment任意テキスト文字の位置を指定(上中央、下中央、上左寄り、など)
backgroundColor任意ボタンの色を指定
shape任意ボタンの外枠を指定(角丸、左右丸、など)

【Flutter】OutlinedButtonの使い方

Flutterの基本ボタン3つ目はOutlinedButtonです。名前の通り、ボタンの外枠に線のあるボタンです。

上記画面のOutlinedButtonのサンプルコードは以下の通りです。

               OutlinedButton(
                    onPressed: () {},
                    child: Text("クリック可"),
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 30),
                      foregroundColor: Colors.blue, // foreground
                      fixedSize: Size(220, 80),
                      alignment: Alignment.topCenter,
                    )),
                OutlinedButton(
                    onPressed: () {
                      print('赤クリック!');
                    },
                    child: Text("クリック可"),
                    style: TextButton.styleFrom(
                        backgroundColor: Colors.red.shade50,
                        textStyle:
                          const TextStyle(fontSize: 30, color: Colors.green),
                      foregroundColor: Colors.red,
                      // foreground
                      fixedSize: Size(220, 80),
                      alignment: Alignment.bottomCenter,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                    )),
                OutlinedButton(
                    onPressed: null,
                    child: Text("クリック不可"),
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 30),
                      foregroundColor: Colors.red, // foreground
                      fixedSize: Size(220, 80),
                      shape: StadiumBorder(),
                    )),
 
スクロールできます
プロパティ指定内容
onPressed必須ボタンクリック時の処理
child必須ボタンに表示するテキスト文字を指定
textStyle任意テキスト文字のサイズ指定
foregroundColor任意テキスト文字の色指定
fixedSize任意テキストボタンのサイズ指定(横*縦)
alignment任意テキスト文字の位置を指定(上中央、下中央、上左寄り、など)
backgroundColor任意ボタンの色を指定
shape任意ボタンの外枠を指定(角丸、左右丸、など)

【Flutter】IconButton の使い方

Flutterの基本ボタン4つ目はIconButton です。

上記画面のOutlinedButtonのサンプルコードは以下の通りです。

               IconButton(
                  onPressed: () {},
                  iconSize: 40,
                  icon: Icon(Icons.home),
                  color: Colors.amber,
                ),
                IconButton(
                  onPressed: () {},
                  iconSize: 40,
                  icon: Icon(Icons.settings),
                  color: Colors.blue,
                ),
                IconButton(
                  onPressed: () {},
                  iconSize: 40,
                  icon: Icon(Icons.schedule),
                  color: Colors.red,
                ),
スクロールできます
プロパティ指定内容
onPressed必須アイコンクリック時の処理
icon必須表示したいアイコンを指定
iconSize任意アイコンのサイズ指定
color任意アイコンの色を指定

【Flutter】FloatingActionButton の使い方

Flutterの基本ボタン5つ目はFloatingActionButton です。画面下に配置するボタンです。

上記画面のFloatingActionButton のサンプルコードは以下の通りです。

            FloatingActionButton.extended(
              backgroundColor: Colors.red,
              onPressed: () {},
              label: const Text('追加'),
              icon: Icon(Icons.add),
            ),
            FloatingActionButton(
              backgroundColor: Colors.green,
              onPressed: null,
              child: Icon(Icons.access_alarms),

            ),
            FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.close),
            ),
          ],
スクロールできます
プロパティ指定内容
onPressed必須ボタンクリック時の処理
child必須ボタンに表示するアイコンを指定
label任意表示したいテキスト文字を指定

【Flutter】 全てのボタンのサンプルコード(コピペでそのまま使えます)

上記が画像のサンプルコードです。そのまま使えますのでご利用ください。

import 'package:flutter/material.dart';

void main() => runApp(ButtonDemo());

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ボタンデモ')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                TextButton(
                  onPressed: () {},
                  child: Text('TextButton'),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('ElevatedButton'),
                ),
                OutlinedButton(
                  onPressed: () {},
                  child: Text('OutlinedButton'),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconButton(
                  onPressed: () {},
                  iconSize: 40,
                  icon: Icon(Icons.home),
                ),
                IconButton(
                  iconSize: 40,
                  onPressed: () {},
                  icon: Icon(Icons.settings),
                ),
                IconButton(
                  iconSize: 40,
                  onPressed: () {},
                  icon: Icon(Icons.schedule),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                TextButton.icon(
                  onPressed: () {},
                  icon: Icon(Icons.home),
                  label: Text('ホーム'),
                ),
                ElevatedButton.icon(
                  onPressed: () {},
                  icon: Icon(Icons.settings),
                  label: Text('設定'),
                ),
                OutlinedButton.icon(
                  onPressed: () {},
                  icon: Icon(Icons.calendar_month),
                  label: Text('カレンダー'),
                ),
              ],
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

まとめ:Flutter入門者は5つのボタン(button)を知ってくと良い

今回の記事では、Flutterボタンにおける基本的な使い方サンプルコードアプリ画面で解説しました。

Flutterで知っておくべきボタン

  1. TextButton
  2. ElevatedButton
  3. OutlinedButton
  4. IconButton 
  5. FloatingActionButton 


Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次