【Flutter】FloatingActionButtonの使い方｜Scaffoldボタンを表示・装飾する

「Flutterアプリで強調したボタンを表示したい」

こんな時に便利なのが FloatingActionButton(FAB) ウィジェットです。

FABを使用することでアプリの画面下部に主要なアクションを強調するボタンを実装できます。またFloatingActionButton.extendedを使えばアイコンとテキストの両方を表示することも可能です。

それではFABの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

FloatingActionButton(FAB)の基本的な使い方について解説します。

FABはScaffoldのfloatingActionButtonプロパティの引数として使用されます。またFABのchildプロパティでボタン上に表示されるウィジェット、onPressedプロパティでボタンが押された時の処理を設定します。

Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.favorite),
    onPressed: () {},
  ),
);

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.favorite),
        onPressed: () {},
      ),
    );
  }
}

カスタマイズ方法

続いてFloatingActionButton(FAB)のカスタマイズ方法について解説します。

前景色・背景色

FABに表示されるテキストやアイコンなどの色はforegroundColorプロパティ、背景色はbackgroundColorプロパティで設定できます。

FloatingActionButton(
  child: Icon(Icons.favorite),
  foregroundColor: Colors.limeAccent,
  backgroundColor: Colors.pink[200],
  onPressed: () {},
),

ボタンが押された時・ホバーした時の色

FABが押された時の色はsplashColorプロパティ、カーソルでホバーした時の色はhoverColorプロパティで設定できます。

FloatingActionButton(
  splashColor: Colors.amber,
  hoverColor: Colors.red,
  onPressed: () {},
),

影の高さ

FABの影の高さはelevationプロパティで設定できます。

FloatingActionButton(
  elevation: 10,
  onPressed: () {},
),

機能の説明テキストを表示

ボタンの機能説明をするテキストを表示するにはtooltipプロパティを使用します。

ボタンが長押しされるとtooltipプロパティで指定した文字列が表示されます。

FloatingActionButton(
  tooltip: 'FAB',
  onPressed: () {},
),

ボタンのサイズ

FABのサイズは次の3つのコンストラクタから選択できます。

FloatingActionButton.small(
  onPressed: () {},
),

アイコンとテキストの両方を表示

FABでアイコンとテキストを両方表示したい場合にはFloatingActionButton.extendedのコンストラクタを使用します。

基本的にlabelプロパティにテキスト、iconプロパティにアイコンを渡しますが、異なるウィジェットを渡しても大丈夫です。

FloatingActionButton.extended(
  label: Text('Add'),
  icon: Icon(Icons.add),
  onPressed: () {},
),

まとめ

今回はFloatingActionButton(FAB)の基本的な使い方とカスタマイズ方法について解説しました。

FABを使用することでアプリの画面下部に主要なアクションを強調するボタンを実装できます。またFloatingActionButton.extendedを使えばアイコンとテキストの両方を表示することもできるのでぜひ使ってみてください。