はじめに

業務でFlutterに触れる機会が増えてきたので、自分の備忘録も兼ねて画面作成の基本となるWidgetについて簡単にここでまとめておきたいと思います。

動作環境

Windows
Flutter SDK 3.24.5
Android Studio Ladybug | 2024.2.1 Patch 2

Widgetについて

WidgetとはFlutterにおけるUIを構成する要素のことを指します。
Widgetは大きく二種類に分けることができて、一つはボタンやテキストなどの画面のパーツとなるもので、もう一つはパーツを横並べにしたり、中央ぞろえにしたりとレイアウトに関わるものです。
この記事ではまずは見た目でわかりやすい画面のパーツとなるWidgetをいくつか紹介します。

Scaffold

Scaffoldは画面の土台となるWidgetで、画面上部のAppBarなどの画面の基本的な構成要素を簡単に実装することができます。
Scaffoldの代表的なプロパティとして以下のものがあり、それぞれのプロパティを指定することで、表示内容や見た目などを自由に変えることができます。

appBar：画面上部に表示されるアプリバー
body：画面のメイン部分
floatingActionButton：画面の右下に表示されるボタン
bottomNavigationBar：画面下部に表示されるナビゲーションバー

ボタン系

TextButton

TextButtonはテキストを表示し、それを押下したときになにかイベントを発生させるときに使用するWidgetです。
デフォルトだと枠線は無く、押下されたときとそうでないときでテキストの色が変わるようになっています。ボタン系のWidgetの中では最もシンプルなものです。

ElevatedButton

ElevatedButtonはGoogleが推奨するマテリアルデザインに準拠した見た目のボタンを配置するためのWidgetです。
角の丸みや影の付き方などの調整が簡単にでき、モダンな見た目のレイアウトを作りやすいです。

OutlinedButton

OutlinedButtonはTextButtonに枠線が付いているWidgetです。
表示内容にはテキストやアイコンを使用することができます。

テキスト系

Text

Textはテキストを表示するために使用するWidgetです。
フォントサイズや色、フォントスタイルなどの設定プロパティが用意されています。

TextField

TextFieldはユーザーにテキスト入力をさせるためのフィールドを配置するためのWidgetです。
未入力の際にうっすらと表示されるヒントテキストの表示などの設定プロパティが用意されています。

画像系

Image

Imageは画像表示するために使用するWidgetです。
画像はネットワーク上にあるものやローカルにあるものを参照することができます。
また、画像サイズの調整も簡単に行うことができます。

まとめ

今回はFlutterの基本となる代表的なWidgetをいくつか紹介しました。
ここで紹介したもの以外にもまだまだたくさんのWidgetがあるので、調べてみると便利なものが見つかると思います。

参考