Flutter Buttonを使ったシンプルなUI構築の基本

モバイル開発•
FlutterDart

はじめに

Flutterでアプリを作るとき、画面の中にボタンを配置することが多いですよね。 画面をタップするだけでイベントを引き起こすシンプルな仕組みは、多くのユーザーにとって操作の要になります。

とはいえ、初心者の方にとっては「ボタン一つ作るだけなのに、なぜこんなに種類があるのだろう」と感じるかもしれません。 実は、ちょっとした違いを把握するだけで、アプリのデザインや使い勝手がグッと良くなるケースがあるのです。

ここでは、Flutterのボタンについて代表的な種類と実装方法を紹介していきます。 実務のシーンで「どんなUIを作りたいのか」に合わせる形でボタンを選んでみると、効率的に開発できるでしょう。

ボタンの動作やカスタマイズ方法をしっかり押さえておけば、ログイン画面のような重要な場面でもスムーズに実装できます。 まずは全体像をイメージしながら、順番に見ていきましょう。

Flutterのボタン概要

Flutterには複数のボタンウィジェットが用意されています。 たとえばElevatedButtonは立体感のあるデザインでよく使われますし、TextButtonは文字だけを強調したシンプルな表現に向いています。

具体的には下記のようなボタンが代表的ですね。

ElevatedButton

影が付いたように見える立体的なボタン

TextButton

テキストのみのフラットなボタン

OutlinedButton

枠線だけが描かれたボタン

IconButton

アイコンのみを表示するボタン

いずれもタップ・クリックといった操作があれば、プログラム上で処理が実行されます。 アプリのコンセプトや利用シーンに合わせて、どのボタンを使うか考えてみると良いでしょう。

実務での活用シーン

実際の業務アプリを考えると、いくつかの画面でボタンが活躍します。 たとえば、あるアプリではログイン画面が重要ですし、別のアプリでは商品の購入ボタンが目立つところに配置されるかもしれません。

一方、設定画面のように一括でオプションを並べる場合は、TextButtonを使ってシンプルにまとめたい場合もあります。 また、SNSアプリのように投稿やいいねボタンをアイコンで表示するケースでは、IconButtonが便利です。

つまり、実務の観点では「ボタンの見た目や配置だけでなく、利用者が見つけやすいかどうか」を常に意識することが欠かせません。 社内向けの業務システムなら、ボタンの見た目よりも機能のわかりやすさが重視されることもあるでしょう。

アプリの目的と利用シーンをイメージしつつ、最適なボタンの種類を選んでいくと、結果的に使いやすいUIにつながります。 ここからは具体的なコードを確認しながら、各ボタンの使い方を学んでいきます。

ElevatedButtonの基本的な使い方

ElevatedButtonは、やや盛り上がった見た目を持つボタンです。 ユーザーに対して押せる場所を直感的に示せるため、多くの画面で採用されています。

以下はElevatedButtonを使った簡単なサンプルコードです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ElevatedButton Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // ここにボタンが押された時の処理を書く
              print('ElevatedButton pressed!');
            },
            child: const Text('押してみよう'),
          ),
        ),
      ),
    );
  }
}

このように、onPressedプロパティに関数を設定することで、ボタンがタップされた時の処理を指定できます。 シンプルなコンポーネントに見えますが、スタイリングを変更したり、サイズや色を調整したりできる点も魅力です。

業務システムでは、ElevatedButtonに「保存」「更新」などの処理を割り当てるケースが多いでしょう。 ユーザーが画面を見た瞬間に「ここを押すと処理が始まるな」とわかるよう、余白やカラーリングに気を遣うと使いやすい画面になります。

TextButtonでシンプルな操作を実装

次に、よりシンプルな表現を実現するTextButtonを見てみましょう。 背景色や影がなく、文字がそのままボタンとして見えるため、画面上であまり主張させたくない場面で使われることが多いです。

たとえば、ヘルプページへのリンクやサブ機能の呼び出しなどに使いやすいでしょう。 以下は簡単なコード例です。

import 'package:flutter/material.dart';

class TextButtonSample extends StatelessWidget {
  const TextButtonSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () {
          // ボタンタップ時の処理
        },
        child: const Text('詳しく見る'),
      ),
    );
  }
}

シンプルな分、スクリーン全体の見た目をうるさくさせずに、リンク的な役割を持たせられます。 しかし、主操作として扱う場合には気づかれにくい可能性もあるので、利用シーンをよく検討すると良いでしょう。

複数のオプションを縦に並べるようなシーンや、細かい案内を表示するUIでは、TextButtonが画面をすっきりまとめてくれます。 使い分けを意識するだけでも、アプリの完成度が変わってきますよね。

OutlinedButtonの実装と特徴

もう少し視覚的な存在感が欲しいけれど、ElevatedButtonほど主張させたくない場合に使えるのがOutlinedButtonです。 文字と外枠だけでボタンであることを示し、内部は塗りつぶされません。

OutlinedButtonを使うときには、下記のようにコードを記述します。

import 'package:flutter/material.dart';

class OutlinedButtonSample extends StatelessWidget {
  const OutlinedButtonSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: OutlinedButton(
        onPressed: () {
          // ボタンタップ時の処理
        },
        child: const Text('枠線のみのボタン'),
      ),
    );
  }
}

枠線があるので「押せる」感覚は保ちつつも、背景色で主張しすぎないバランスの良いデザインになっています。 実務では、複数の選択肢を同列に並べる際、下位の選択肢をOutlinedButtonでまとめることも考えられます。

ただし、背景色のある画面に置くと、場合によっては文字が見づらくなることがあります。 テキストカラーや枠線のカラーを調整して、利用シーンに合わせて見やすさを工夫すると良いでしょう。

アイコン操作に適したIconButton

SNSやチャットアプリなどでよく見かけるのがIconButtonです。 画像やイラストのアイコンだけが配置されるシンプルな見た目なので、直感的に操作できる特徴があります。

たとえば「お気に入りに追加」「シェアする」「メニューを開く」といった機能に使われることが一般的ですね。 コード例は以下の通りです。

import 'package:flutter/material.dart';

class IconButtonSample extends StatelessWidget {
  const IconButtonSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: IconButton(
        icon: const Icon(Icons.favorite),
        onPressed: () {
          // ボタンタップ時の処理
        },
      ),
    );
  }
}

アイコンだけで機能を想像できるようにするため、周辺のUIも合わせてデザインすることが重要です。 社内向けツールなど、説明文なしでは伝わりにくい機能が多い場合にはテキストを併用するなど工夫してみましょう。

いろいろなアイコンを活用することで、よりリッチな操作体験を実現しやすくなります。 ただし、あまりにアイコンが増えすぎると「何のボタンだろう？」と混乱するので、厳選するのがコツです。

ボタンをカスタマイズする方法

ボタンはデフォルト設定でも便利ですが、実務では見た目をカスタマイズしたくなることが多いでしょう。 たとえば、ElevatedButtonのカラーやTextButtonの文字色、OutlinedButtonの枠線の太さなどは設定が可能です。

Flutterでは、ButtonStyleを使うことで柔軟にデザインをいじれます。 以下のようにElevatedButtonのスタイルを変更してみると、独自の雰囲気を出せるでしょう。

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.blueGrey,
    onPrimary: Colors.white,
    minimumSize: const Size(120, 48),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: const Text('カスタムボタン'),
),

primaryでボタンの背景色を設定し、onPrimaryで文字の色を指定しています。 また、minimumSizeでボタン全体の大きさを固定し、borderRadiusで角を丸くしている点にも注目です。

このように細かくデザインをいじると、アプリのブランドカラーを反映するなど、企業向けに最適化することが容易になります。 ただし、ボタンのカスタマイズが多すぎると管理が大変になりやすいので、コンポーネント化して使い回す工夫も大切です。

実務で失敗しやすいポイント

初心者のうちは、デフォルトの設定をそのまま使って済ませたくなる一方で、こだわりが強くなるとスタイルをいじり過ぎて混乱することがあります。 使うボタンの種類を一画面に詰め込み過ぎると、ユーザーからするとどこをタップすればいいかわからなくなるリスクがあるでしょう。

また、複数の画面で色や形が不一致な状態だと、見た目の統一感が崩れてしまいます。 たとえば、メイン操作ボタンは常にElevatedButtonにして同じカラーを使い、サブ操作や補足機能にはTextButtonやOutlinedButtonを用いるのがおすすめです。

さらに、「うっかりonPressedがnullのまま実装してしまう」というケースにも注意してください。 何も設定がなければボタンが無効化されたままとなり、画面上でボタンが使えずに「バグがあるのでは？」と思われるかもしれません。

アプリの中で一貫したルールを決めておくと、チーム開発でもスムーズに画面を作れます。 デザイナーと相談して、色やサイズを話し合う文化を持つのも良いでしょう。

状態管理との絡み

ボタンを押したときには、多くの場合アプリの状態が変わるはずです。 たとえば、画面遷移やデータの更新、ログイン処理などが実行されるかもしれません。

StatefulWidgetと組み合わせる場合、onPressedのコールバック内でsetState()を呼び出すこともあるでしょう。 また、リストアプリならリストデータに新しい要素を追加する場面があるかもしれません。

リストの更新やフォームの送信などでは、ボタンの押下をトリガーにして状態を変更するイメージです。 このあたりはBlocやRiverpodなどの状態管理ライブラリとも関連してきますが、まずは「ボタンはアクションの入り口」という考え方を押さえておけば十分です。

見た目だけを整えても、実際に動かしてみると処理が上手くいかない場合があるかもしれません。 そんなときは、処理フローを整理してからボタンのonPressedを適切に設定するとトラブルを減らせるでしょう。

実務でよくあるアプリ例

たとえば、社内向けの勤怠管理アプリを考えてみましょう。 出勤ボタンや休憩ボタン、退勤ボタンがあり、押すたびにデータをサーバーへ送信します。

この場合、出勤ボタンや退勤ボタンはユーザーにとって主操作なので、ElevatedButtonを使って明確に表示する方法が一般的です。 休憩ボタンや履歴表示ボタンなどはサブの機能として、OutlinedButtonやTextButtonで区別することが考えられます。

一方、会計アプリのレジ画面では数字キーや商品選択のボタンを大量に配置するケースがあります。 IconButtonを活用しながら、タップしやすい大きさを確保することが重要でしょう。

このように、アプリの特性に合わせて最適なボタンを使い分けると、開発段階での混乱が減ってユーザーにもやさしい設計になります。 画面レイアウトが複雑になるほど、ボタンの種類と役割はしっかり分けておきたいところです。

カラーリングとアクセシビリティ

色の組み合わせによっては、視覚的にわかりづらいUIができてしまうことがあります。 とくに背景とボタンのコントラストが低いと、押せる場所が見えにくくなりがちです。

視覚障がいに配慮するなら、テキストのコントラスト比にも注意してください。 FlutterはMaterial Designに基づいたコンポーネントを提供していますが、必要に応じて文字の色合いを調整するなど、小さな工夫が大切です。

また、ボタンにアイコンだけを載せるときは、わかりやすいアイコンを使うのはもちろん、ツールチップ（Tooltip）を設定するのもおすすめです。 「IconButtonの上にカーソルを乗せると、このボタンの機能が説明される」という仕組みがあれば、直感的でない操作も補いやすくなります。

最初は手間がかかるように感じるかもしれませんが、将来的にユーザーが増えたとき、アクセシビリティを考慮しておくと大きな利点があるでしょう。 とくに公共系のシステムや高齢者向けのアプリでは、しっかりとした配慮が求められるはずです。

まとめ

ここまで、Flutterのボタンを中心に解説してきました。 ElevatedButton、TextButton、OutlinedButton、IconButtonなど、どれも一長一短がありますが、組み合わせ方やスタイル次第でアプリの見やすさや操作感が大きく変わります。

実務シーンでは、ボタンの色や形だけでなく「どこに設置するか」や「ユーザーが押したときにどうなるか」といった流れも重要です。 明確な目的があるボタンほど、色・大きさ・位置でユーザーにアピールする必要があるでしょう。

一方で、タップの対象が増えすぎると混乱を招くため、どのボタンにどんな役割を持たせるかはチーム内で決めておくのが良いですね。 全画面に共通するコンポーネントとしてデザインを統一すると、ユーザーからも「このアプリはわかりやすい」という印象を持ってもらいやすいはずです。

ボタンの種類が多すぎると感じたら、まずは「主操作用」「サブ操作用」「アイコン用」の3つくらいに絞ってみると管理しやすいでしょう。

ボタンのスタイリングや状態管理は、初めてだと少しややこしく感じるかもしれません。 しかし、アプリの使いやすさを左右する大切な要素ですので、順を追って理解し、自分のプロジェクトで使いこなしてみてください。

Flutterをマスターしよう

この記事で学んだFlutterの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

Flutterの人気講座ランキングを見る筆者おすすめ No.1 講座！「Flutterアプリ開発講座(初級編)」
モバイル開発の新着記事をチェック

モバイルアプリエンジニアとは？仕事内容・必要スキル・将来性を徹底解説