第3回：アプリ開発：UI（DartPadを用いた基礎練習）

第3回の講義では、Flutterのユーザインターフェース（UI）の構築方法について学びます。

第3回の目標

第3回の授業では、DartPadを用いて、FlutterのUIを構築する練習を行います。 DartPadを用いることで、面倒な環境構築無しに、ウェブブラウザのみでUI構築の練習ができます。また、この授業を通して実装するサンプルアプリの全体像にについても共有します。環境構築は、第4回（Flutterのインストールと設定）と第5回（Flutter開発用のIDEのインストール）を通して行います。

今後の予定

第5回からの授業は、実際にFlutterを用いてアプリを構築しながら、アプリの実装方法について学んでいきます。ますはアプリの具体例として、シンプルな TODO管理アプリ を実装します。その次に、実装したTODO管理アプリに新しい機能を追加していく形で、スマートフォンに搭載されたカメラやモーションセンサ、位置情報センサ、通信・通知機能などを扱えるようにしていきます。

この授業を通して最終的に開発するアプリ

「松：TODO管理アプリ」
「竹：TODO管理アプリ＋センサ」
「梅：TODO管理アプリ＋センサ＋バックグランド起動」

「TODO管理アプリ」

一般的なTODOアプリです。タスクを登録するとそれがリストかされて表示されます。

「TODO管理アプリ+センサ」

TODOアプリを拡張したアプリケーションです。スマートフォンに搭載れた位置情報やモーションセンサ、カメラを使った秘密の機能も実装します。また、MOCHAのウェブAPIを用いて、滞在場所の詳細情報の取集も行います。

「TODO管理アプリ＋センサ＋バックグランド起動」

場所（部屋）に応じてリマインドを行うアプリを実装します。「TODOアプリ+センサ」に加えて、アプリをバックグランドで起動し、滞在場所に応じて、タスクのリマインドを行います。滞在場所の検知はBluetoothを用いて行います。

Flutterを試してみよう！

基礎知識

Flutterは、dartで動作しているので、プログラムは、mainを起点に動作を開始します。 FlutterのUIコンポーネントは全てWidgetで構成されており、複雑なUIもそのWidgetを重ねることで実装できます。

Flutterでは、Widgetを重ねることで、複雑なUIもそのWidgetを重ねることで実装できます。そのWidgetの重なりをWidgetTreeを言います。一見複雑に見えますが、慣れるとGPUベースの実装よりも可読性が高くなります。

StatefulWidgetとStatelessWidget

Widgetには、大きく分けると「StatefulWidget」と「StatelessWidget」が存在します。

StatefulWidgetとは、「状態」を保持したWidgetのことで、トグルボタンのようにその状態（オン・オフ）を切り替わるWidgetのことです。一方、StatelessWidgetは、「状態」が無いWidgetのことで、文字列を表示するラベルなどView内で動的な変更を伴わないWidgetのことです。

「StatefulWidget」と「StatelessWidget」をベースに、ボタンやリスト、画像など様々なUIコンポーネントが実装されています。 Flutterの基本的なコンポーネントは、こちらのリンクから確認できます。サードパーティー製のライブラリも多数存在しており、これらを組み合わせことで、複雑なUIを構成できます。

練習：Dartを用いたUI開発

本格的に、UI構築の練習を行います。

練習1. 文字を中央に表示

まずは画面中央に文字列を表示して見ましょう。今回は、Hello world!という文字列を表示します。 DartPadの左側にソースコード、右側にFlutterのUIが設置されています。右上のRunボタンを押して見てください。左側のソースコードが実行され、実行結果としてFlutterのUIが表示されます。

DartPad右側のスペースにHello World!の文字を表示できれば成功です。

練習2. 文字のスタイル変更

次に、Hello world!の「文字色を青色」、「文字の太さをBold」、「文字サイズ」を20ptにして見ましょう。

Text(....)の引数として、スタイル情報を渡すことで、標準の文字列に要素を追加することができます。上記の例では、Text Widgetのstyleという引数に、以下に示すTestStyleの要素渡すことで、文字スタイルを変更しています。

TextStyle(
  color: Colors.blue,
  fontSize: 20,
  fontWeight: FontWeight.bold,
)

練習3. 文字列を縦に並べる

では次に、TextWidgetを縦に並べ見ましょう。 Widgetを縦に並べるためには、Columns(children:[]) を使います。 Centerの子要素（child:）に、Columns(children:[])を利用し、これまでCenterの子要素になっていた、 Text 1(Text())をColumnsの子要素（children:[]）に移動させます。縦に積む要素が、複数数個になる可能性があるので、Columnsの引数はWidgetの配列です。最後に配列に、Text 2 Widgetを追加します。

Columnsで要素を積み上げると、上側に要素が偏ってしまいます。その場合、Columnの引数に mainAxisAlignment: MainAxisAlignment.center, を設定することで、画面中央に文字列を配置できます。

Date: October 12, 2021

Tags:

スマホアプリ開発基礎