【Flutter】ボタンをグレーアウトする方法について解説！

2024年3月8日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

ボタンをグレーアウトする基本的な方法
ボタン押下後ボタンをグレーアウトする方法

開発環境

Dart 3.0.0
Flutter 3.10.0

Flutterにおけるボタンの基本

Flutterでは、色んなボタンウィジェットが用意されていますが、個人的な所感はElevatedButtonとIconButtonがよく使用されているのではないかと思います。ボタンウィジェットはサイズの変更や、色の変更などカスタマイズすることで、アプリにあった見た目につくることができます。

ElevatedButtonについて詳しく知りたい！という読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

ボタンをグレーアウトする方法

概要

Flutterでボタンをグレーアウトする最も基本的な方法は、ボタンのenabledプロパティをfalseに設定し、onPressedプロパティをnullにすることです。これにより、ボタンは自動的に無効化され、視覚的にもグレーアウトされます。

サンプルコード

以下のサンプルコードを使用して、ボタン押下することによって、別のボタンをグレーアウトする方法について解説していきたいと思います。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isButtonDisabled = true;

  void _toggleButton() {
    setState(() {
      _isButtonDisabled = !_isButtonDisabled;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ボタンをグレーアウトするデモ'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _isButtonDisabled ? null : () => _toggleButton(),
              child: Text(_isButtonDisabled ? 'グレーアウト状態' : 'アクティブ状態'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.disabled)) {
                      return Colors.grey; // ボタンが無効の時の色
                    }
                    return Colors.blue; // ボタンが有効の時の色
                  },
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () => _toggleButton(),
              child: Text('ボタンの状態を切り替え'),
            ),
          ],
        ),
      ),
    );
  }
}

サンプルコードの解説

16-19行目: MyHomePageクラスは、アプリのメイン画面を表します。
26行目: _isButtonDisabled変数は、ボタンの有効/無効状態を管理します。
24-28行目: _toggleButtonメソッドは、ボタンの状態を切り替えるためのメソッドです。
40-53行目: ElevatedButtonウィジェットを使用してボタンを作成します。onPressedプロパティがnullの場合、ボタンはグレーアウトされます。
56行目: ボタンのテキストは、ボタンの状態に応じて変わります。
43-52行目: ButtonStyleを使用して、ボタンの背景色を状態に応じて変更します。ボタンが無効化された場合、背景色をグレーに設定します。

動作確認

いちの

それでは、動作を確認してみましょ〜

まとめ

いかがでしたでしょうか？今回は、ボタンをグレーアウトする方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。