【Flutter】ElevatedButtonでイケてるボタンのレイアウトを簡単作成【サンプルコードあり】

こんにちはyu_to(@yu_to_python)です。

今回はFlutterでボタンのレイアウトを作成する際に不可欠なWidgetであるElevatedButtonについて使い方を解説していきます。

ElevatedButtonはFlutter2.0から新しく導入されたWidgetで、それ以前のバージョンではRaisedButtonという名称で使われていました。

一応今でもRasedButtonは使用できますが、公式がElevatedButtonを使う様に推奨していますので是非この記事を最後まで読んで使い方をマスターしてみてください。

Flutter2.0から推奨になったボタン系Widget

Flutter2.0以前と以後でボタン作成系のWidgetの名称が下記の通り変更となっています。

・RaisedButton　→　ElevatedButton

・FlatButton　→　TextButton

・OutlineButton　→　OutlinedButton

変更後の違いとしてはスタイルの指定方法が変わったイメージです。

詳細についてはこの記事下部のtipsの項目で紹介します。

今回はElevatedButtonにフォーカスを当てた解説になりますが、他の2つも見た目が少し違うだけでプロパティの種類等は全く同じなので応用可能になります。

ElevatedButtonの特徴

たった数行でボタンのレイアウトが作成可能

例えばwebでボタンを作ろうとするとHTMLとCSSで地道に自分でレイアウトを作成する必要がありますが、Flutterであればデフォルトで用意されているこのElevatedButtonを使用するだけで、簡単にボタンのレイアウトが作成できてしまいます。

シンプルなボタンを表示するだけであればたった4行で作成できます。

example

~~~
ElevatedButton(
  onPressed: () {/* ボタンが押された時の処理 */},
  child: Text('ただのボタン'),
),
~~~

この辺は流石フレームワークといった感じです。

用意されているプロパティも直感的に指定可能なので色や形、サイズ、その他エフェクトなども簡単に調整できるのが嬉しいです。

他のWidgetと組み合わせなくても単独でレイアウトが完結する

ElevatedButtonにはレイアウト調整用に「.styleFrom」という専用のコンストラクタが用意されています。

.styleFromを使うことで、他のWidgetでは複数のWidgetを組み合わせないと表現できないレイアウトがElevatedButton単独で表現する事ができます。

例えば、Widgetのサイズを変更したい時に他のWidgetだとSizedBox等をラップしてあげる必要があるのですが、ElevatedButtonの場合、.styleFromのfixedSizeのプロパティを使うことで同じレイアウトを表現できます。

example

ElevatedButton(
  onPressed: () {/* ボタンが押された時の処理 */},
  child: Text('ただのボタン'),
  style: ElevatedButton.styleFrom(fixedSize: Size(250, 100)),
),

SizedBoxの詳しい解説はこちらでいているので良ければ参考にしてみてください。

2021年1月13日【Flutter】Widgetのサイズを変更できるSizedBoxの使い方【サンプルコードあり】

サンプルコード

コピペですぐ動かせるのでまずは実際に動かしてみてください。

動作確認したバージョンは下記の通りです。

・Flutter 3.0.1

・Dart 2.13.3

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ElevatedButton',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ElevatedButton'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // * ただのボタン --------------------------------------------------
              ElevatedButton(
                onPressed: () => {
                  print('ボタンが押された！'),
                },
                child: Text('ただのボタン'),
              ),
              ElevatedButton(
                onPressed: () {/* ボタンが押された時の処理 */},
                child: Text('背景色を指定したボタン'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.red, //ボタンの背景色
                ),
              ),
              // * ボタンを押した時に色が変わる --------------------------------------
              ElevatedButton(
                onPressed: () {/* ボタンが押された時の処理 */},
                child: Text(
                  '押した時赤になる',
                  style: TextStyle(color: Colors.white),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.green, //ボタンの背景色
                  onPrimary: Colors.red, // ボタンを押した時の色
                ),
              ),
              // * ボタンに枠線を付ける ----------------------------------------------
              ElevatedButton(
                onPressed: () {/* ボタンが押された時の処理 */},
                child: Text('枠線付きボタン'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.purple, //ボタンの背景色
                  side: BorderSide(
                    color: Colors.blue, // 枠線の色
                    width: 5, // 枠線の太さ
                  ),
                ),
              ),
              // * .styleFromコンストラクタでサイズ変更 -----------------------------------------
              ElevatedButton(
                onPressed: () {/* ボタンが押された時の処理 */},
                child: Text('.styleFromコンストラクタでサイズ変更'),
                style: ElevatedButton.styleFrom(
                  fixedSize: Size(250, 100), // サイズ変更
                  primary: Colors.pink,
                ),
              ),
              // * .iconコンストラクタ ------------------------------------------------
              // アイコン付きのボタンを作成できる
              ElevatedButton.icon(
                onPressed: () {/* ボタンが押された時の処理 */},
                icon: Icon(Icons.settings), // 表示するアイコン
                label: Text('.iconコンストラクタ'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

よく使うプロパティ

onPressed（必須）

ボタンを押した時の処理を指定するプロパティ。

Widgetではなく処理を指定する点に注意です。

記述の方法は以下の３通りあるので場合に応じて使い分けましょう。

example

▼アロー関数
onPressed: () => {
  print('ボタンが押された！'),
  print('ボタンが押された！'),
},

or

※処理が一行の場合ブラケットは省略可能
onPressed: () => print('ボタンが押された！'),

▼ブラケット内で処理を書く
onPressed: () {
  print('ボタンが押された！');
},

▼voidFunctionを直接指定する
~~~
void voidFunction() {
  print('ボタンが押された！');
}
~~~
onPressed: voidFunction,

child（必須）

ElevatedButton内に設定する子Widgetを設定するプロパティ。

大抵の場合Textだと思う。

example

~~~
child: Text('ただのボタン')
~~~

onLongPress

ボタンを長押しした時の処理を指定するプロパティ。

記述の方法はonPressedを同じ感じで色々ある。

example

~~~
onLongPress: () => print('ボタンが長押しされた！'),
~~~

style

ボタンのスタイルを設定するプロパティ。

大抵の場合ElevatedButton.styleFromかButtonStyleだと思う。

example

~~~
style: ElevatedButton.styleFrom(
  primary: Colors.green, //ボタンの背景色
  onPrimary: Colors.red, // ボタンを押した時の色
),
~~~

tips

RaisedButtonとの書き方の違い

冒頭の方でも触れた通りですが、違いとしてはスタイルの指定方法が変わったイメージです。

RaisedButtonではデフォルトのプロパティにcolor等があり、直接スタイルを指定する仕様でした。

ElevatedButtonではスタイル系の記述はstyleに.styleFromやButtonStyle等を指定して一纏めにする仕様に変わっています。

RaisedButton

RaisedButton(
  color: Colors.red,
  onPressed: () {/* ボタンが押された時の処理 */},
  child: Text('RaisedButton'),
),

ElevatedButton

ElevatedButton(
  onPressed: () {/* ボタンが押された時の処理 */},
  child: Text('背景色を指定したボタン'),
  style: ElevatedButton.styleFrom(　// ⇐　スタイルの指定はstyleプロパティにまとめる様になった
    primary: Colors.red, //ボタンの背景色
  ),
),