【Flutter】アイコンボタン(IconButton)と文字列ボタン(TextButton)を簡単に実装し、サイズを変更するまでの完全ガイド！

2024年2月23日2024年4月2日

【Flutter】アイコンボタン(IconButton)と文字列ボタン(TextButton)を簡単に実装し、サイズを変更するまでの完全ガイド！

いちの

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

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

アイコンボタン(IconButton)を簡単に実装する方法
文字列ボタン(TextButton)を簡単に実装する方法
ボタンのサイズを変更する方法
「いいね」ボタンの具体的な作成方法

開発環境

Dart 3.0.0
Flutter 3.10.0

1. アイコンボタン(IconButton)を簡単に実装する

概要

アイコンボタンは、アイコンを表示するボタンで、ユーザーがタップしたときにアクションを実行します。ここでは、「いいね」ボタンを例に取り上げます。

サンプルコード

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('アイコンボタンと文字列ボタンの実装')),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.thumb_up),
            onPressed: () {
              // ここにタップ時の動作を記述
            },
            iconSize: 48.0, // アイコンのサイズを指定
          ),
        ),
      ),
    );
  }
}

サンプルコードの説明

1行目: FlutterのMaterialデザインライブラリをインポートします。
3行目: アプリケーションのエントリーポイントを定義します。
5-17行目: MyApp クラスを定義し、ステートレスウィジェットとして設定します。
7-15行目: build メソッド内でUIを構築します。
8行目: MaterialApp ウィジェットを使用してアプリケーションのルートを定義します。
9-14行目: Scaffold ウィジェットを使用して基本的なビジュアルレイアウト構造を作成します。
10行目: アプリバー（ヘッダー部分）にテキストを表示します。
11-13行目: IconButton ウィジェットを使用して、「いいね」アイコンボタンを配置します。
13行目: Icon ウィジェットを使用して、マテリアルアイコンの「thumb_up」を表示します。
14行目: onPressed プロパティにタップ時の動作を定義します（ここでは何も実行されません）。
17行目: iconSize プロパティでアイコンのサイズを48.0に設定します。

表示確認

いちの

それでは、表示を確認してみましょ〜

ボタン押下時の処理では、非同期通信を行うという事がよくあります。(例えばAPIを叩いたり)以下の記事では、ボタン押下時の非同期処理について分かりやすく解説してますので、興味のある読者様。ご一読いただけますと幸いです。

2. 文字列ボタン(TextButton)を簡単に実装する

概要

文字列ボタンは、テキストを表示するボタンで、ユーザーがタップしたときにアクションを実行します。

サンプルコード

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('アイコンボタンと文字列ボタンの実装')),
        body: Center(
          child: TextButton(
            child: Text('クリックしてください'),
            onPressed: () {
              // ここにタップ時の動作を記述
            },
          ),
        ),
      ),
    );
  }
}

サンプルコードの説明

1行目: FlutterのMaterialデザインライブラリをインポートします。
3行目: アプリケーションのエントリーポイントを定義します。
5-17行目: MyApp クラスを定義し、ステートレスウィジェットとして設定します。
7-15行目: build メソッド内でUIを構築します。
8行目: MaterialApp ウィジェットを使用してアプリケーションのルートを定義します。
9-14行目: Scaffold ウィジェットを使用して基本的なビジュアルレイアウト構造を作成します。
10行目: アプリバー（ヘッダー部分）にテキストを表示します。
11-13行目: TextButton ウィジェットを使用して、テキストボタンを配置します。
13行目: Text ウィジェットを使用して、ボタンに「クリックしてください」というテキストを表示します。
14行目: onPressed プロパティにタップ時の動作を定義します（ここでは何も実行されません）。

表示確認

いちの

それでは、表示を確認してみましょ〜

画像ボタンにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

3. ボタンのサイズを変更する方法

概要

ボタンのサイズを変更するには、Container ウィジェットやPadding ウィジェットを使用して、ボタンウィジェットをラップし、そのサイズや余白を調整します。

サンプルコード（アイコンボタンのサイズ変更）

IconButton(
  icon: Icon(Icons.thumb_up),
  iconSize: 64.0, // アイコンのサイズを大きくする
  onPressed: () {},
)

サンプルコード（文字列ボタンのサイズ変更）

TextButton(
  child: Padding(
    padding: EdgeInsets.all(16.0), // パディングを追加してボタンのサイズを大きくする
    child: Text('クリックしてください'),
  ),
  onPressed: () {},
)

サンプルコードの説明

サイズ変更の具体的な方法として、iconSize プロパティを使用してアイコンボタンのサイズを直接指定したり、Padding ウィジェットを使用して文字列ボタンの内側の余白を調整し、間接的にサイズを変更します。

余白の付け方についても興味があるという読者様。以下の記事で分かりやすく解説されていますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか？今回は、アイコンボタン(IconButton)と文字列ボタン(TextButton)を簡単に実装する方法と、サイズ変更する方法について解説してきました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

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