【Flutter】OutlinedButtonを無効にする方法

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

OutlinedButtonを簡単に無効化する方法
条件に基づいてOutlinedButtonを動的に無効化する方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

Flutterアプリケーションを開発する中で、特定のボタンを一時的に無効にしたいシチュエーションはよくあります。例えば、特定の条件を満たさない限り、ユーザーにボタンを押せないようにする場合などです。今回は、OutlinedButtonを無効にする方法を初心者向けに解説します。

方法1: onPressedにnullを指定して無効化する

OutlinedButtonを無効化する最もシンプルな方法は、onPressed引数にnullを指定することです。onPressedに関数を指定しない（＝nullを指定する）ことで、そのボタンは無効化され、タップできなくなります。

Dart

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('OutlinedButton 無効化例'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: null, // nullを指定してボタンを無効化
            child: Text('無効なボタン'),
          ),
        ),
      ),
    );
  }
}

onPressedにnullを設定するだけでボタンが無効化されるため、非常に簡単です。

方法2: 条件に基づいて無効化する

もう一つの方法は、特定の条件に基づいてボタンを無効化する方法です。例えば、フォームの入力が完了するまではボタンを無効にし、入力が完了するとボタンを有効にする、という実装がよく行われます。

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isButtonEnabled = false; // ボタンの状態を管理する変数

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('条件に基づくボタンの無効化'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                onChanged: (text) {
                  setState(() {
                    _isButtonEnabled = text.isNotEmpty; // テキストが入力されたらボタンを有効化
                  });
                },
                decoration: InputDecoration(
                  hintText: '入力してください',
                ),
              ),
              SizedBox(height: 20),
              OutlinedButton(
                onPressed: _isButtonEnabled
                    ? () {
                        print('ボタンが押されました');
                      }
                    : null, // 入力がある場合のみボタンを有効化
                child: Text('条件付きボタン'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ボタンが押せる条件を動的に変えられるため、フォームバリデーションやユーザーインタラクションに対応した実装が可能です。