🔖

【Flutter】Buttons（Elevated, Text, Outlined Icon, FloatingAction）

2023/04/26に公開

Flutter

Dart

tech

Buttonsは、Flutterアプリケーションのユーザーインターフェースの入力系を管理する重要な機能です。それぞれ簡単な実装例ともに紹介していきます。

参考

公式サイト

Button

FlutterのボタンWidgetは、アプリケーション内でタップすることができる要素です。ボタンは、ユーザーの操作に応答してアプリケーションの状態を変更するために使用されます。
Buttonには、ElevatedButton, TextButton, OutlinedButton, IconButton, FloatingActionButtonなど複数の種類があります。
以下では、それぞれの種類のサンプルコードとUIを紹介します。

①ElavetedButton

マテリアルデザインの標準的なボタンで、押したときに影が表示されます。
通常、プライマリアクションを示すために使用されます。

②TextButton

テキストのみで構成されたシンプルなボタンで、背景なしでテキストカラーが変更される。
セカンダリアクションやダイアログのキャンセルボタンなどに使用されます。

プライマリアクションとセカンダリアクションというのは、「送信」「キャンセル」というダイアログがあったとすれば、「送信」がプライマリアクションで、「キャンセル」がセカンダリアクションになります。

③OutlinedButton

境界線が描かれたボタンで、TextButtonよりも目立ちます。
通常、セカンダリアクションやオプションの選択に使用されます。

④IconButton

アイコンのみで構成されたボタンで、主にアイコンを表示し、タップ時にアクションを実行します。
ツールバーやナビゲーションバーなど、スペースが限られている場所でよく使用されます。

⑤FloadtingActionButton

円形のボタンで、通常は画面の右下隅に配置されます。
新しい要素の追加やチャットの開始、次の画面に遷移する際など、主要なアクションを示すために使用されます。

ButtonsのサンプルコードのUI

Buttonsのサンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Buttons Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  print('ElevatedButton pressed');
                },
                child: Text('ElevatedButton'),
              ),
              TextButton(
                onPressed: () {
                  print('TextButton pressed');
                },
                child: Text('TextButton'),
              ),
              OutlinedButton(
                onPressed: () {
                  print('OutlinedButton pressed');
                },
                child: Text('OutlinedButton'),
              ),
              IconButton(
                onPressed: () {
                  print('IconButton pressed');
                },
                icon: Icon(Icons.favorite),
              ),
              FloatingActionButton(
                onPressed: () {
                  print('FloatingActionButton pressed');
                },
                child: Icon(Icons.add),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参考