Flutter & Dart Cookbookの読書メモ（第7章）

Introducing the Flutter Framework

この章では、Flutterフレームワークの旅を始め、Flutterの基礎のいくつかに焦点を当てます。

著者にとって、Flutterアプリケーションを始めるのに最適な場所は、アプリケーションがどのように見え、どのように動作するかを示す図からです。もしあなたがデザインのバックグラウンドをお持ちなら、ワイヤーフレームという用語の方が馴染みがあるかもしれません。どちらの場合でも、アプリケーションのデザインの代表的なバージョンを作りたいのです。

Flutterでインターフェースを作るのに慣れてきたら、dribbble.comのようなサイトで良いインスピレーション源を見つけることができます。私は通常、このようなサイトを見て、どのようにデザインがまとまるかを考え、一連の画像（つまりワイヤーフレーム）を使って要件をマップ化します。

Flutterチームは、アプリケーションのコーディングを始めるための幅広いテンプレートを提供し、あなたをバックアップしてくれます。スターターコードができたら、ステートフルとステートレスのウィジェットの違いを理解する必要があります。ありがたいことに、Flutterはより複雑なインターフェイスを作成することができるので、この時間への投資は本当に報われます。

Flutterについて語るとき、ウィジェットと、ウィジェットが画面上のコンポーネントをレンダリングするためにどのように使われるかを理解することが本当に必要です。まず、ウィジェットとは何かを定義する前に、インターフェースのモックを作り、Flutterの定型アプリケーションを作ることから始めます。そして、ウィジェットがどのようにユーザーインターフェースを作る（構成する）ために使われるかを見ていきます。最後に、コンポーネント間のインタラクションを表現するためにFlutter内で使用されている構造について理解するために、ウィジェットのツリー構造について簡単に説明します。

7.1 Mocking an Application Interface

• Problem

Flutterアプリケーションを作る前に、レイアウトを理解するためにインターフェースのモックを作る方法が欲しい。

• Solution

アプリケーションのデザインには、グラフィックパッケージを使用します。アプリケーションのワイヤーフレームを作成することで、アプリケーションがどのように動作するかを固めることができます。

ここでは、予算や用途に応じて、役立つパッケージの例をいくつか紹介します。

Excalidraw / Figma / FlutterFlow

• Discussion

インターフェイスをモックすることは、Flutterのようなビジュアルフレームワークを使い始めるための素晴らしい方法です。無料のオンラインツールからFlutterのために作られた専用アプリケーションまで、インターフェイスをデザインする方法はたくさんあります。

アプリケーションのモックを作るとき、私は使用するウィジェットの観点からインターフェイスを捉えることを目指します。そうすることで、特定のデザインを構築することが容易になります。より複雑なデザインを扱う場合は、アプリケーションの要求を理解することで、よりきれいなインターフェイスとデザインの美しさにつながります。

この図では、2つのページとナビゲーションバーという機能を含めています。また、画面遷移がどのように行われるのかも記しています。インターフェイスを分解することは、さまざまなウィジェットの相互作用を学ぶのに有効な方法です。また、ウィジェットなどの正しい用語を学ぶことで、適切な解決策を見出すことができます。このアプリケーションはそれほど高度なものではありませんが、Flutterを使ったウィジェット構築の基本を学ぶのに役立ちました。

図から、このタイプのインターフェイスはFlutterアプリケーションの中で非常に一般的であることを認識することができます。ListView、Text、Imageなどのウィジェットを組み込むことを学ぶことは、ジェスチャーやナビゲーションを扱うことと同様に必須です。

7.2 Creating a Boilerplate Flutter Project

• Problem

テンプレートを元に新しいFlutterアプリケーションを作りたい。

• Solution

Flutterのテンプレートを使って、アプリケーションを開始します。Flutterには様々なアプリケーションのテンプレートが用意されているので、ゼロから始める必要はありません。基本的なセットアップを提供するさまざまなテンプレートが用意されています。

Flutterフレームワークの最近のバージョンでは、機能豊富なサンプルを提供するために作業が行われています。この定型文を使って、専門家からよくある使用パターンを学び、スキルを向上させましょう。

ここでは、Flutterフレームワークで利用可能なテンプレートをいくつか紹介します。

app: これはflutter createのデフォルトで、Flutterアプリケーションを生成するために使用されます。
module: このオプションは、他のアプリケーションと統合可能なモジュールを作成することができます。
package: このオプションは、Flutterプロジェクトを共有できるようにします。
plugin: このオプションは、AndroidとiOSで使用するためのAPIベースを提供します。
skeleton: このオプションは、詳細ビューに基づいたベストプラクティスのアプリケーションを提供します。

templateコマンド、つまり-tに-templateをつけることで、Flutterに対して作成時にテンプレートを適用することを指示することができます。以下は、テンプレートの使用例です。

デフォルトのアプリケーションタイプを作成する。

flutter create my_awesome_app

モジュールを作成する。

flutter create -t module my_awesome_app

パッケージを作成する。

flutter create -t package my_awesome_app

プラグインを作成する。

flutter create -t pluginmy_awesome_app --platforms web --platform android

プラグインを作成する際には、対応するプラットフォームを指定する必要があります。追加する各プラットフォームには、接頭辞として --platform を付加する必要があります。

スケルトンを作成する。

flutter create -t skeleton my_awesome_app

• Discussion