Flutterのプロジェクト

妄想アプリをFullter で開発することにしたので、まずはプロジェクトを作成しなければならない。FlutterではプログラミングとUIデザインが見事に連携しているためだ。

Flutterプロジェクトの作成はVisual Studio Codeで行うので、ここでは触れない。あくまでもAdobe XDのための記録である。Visual Studio Codeの解説はネットにいくらでも転がっている。

プロジェクト名をkenchareとして新規作成しておいた。

UIパネル

プラグインでXD to Flutterを選択するとUIパネルなるものが開く。

FLUTTER PROJECTにVisual Studio Codeで作成したプロジェクトのパスを指定する。なに？エラーだと？

pubspec.yamlにadobe xdとの関連が見つからない、と警告された。

なにそれ？

pubspec.yamlの設定

調べると、Flutterプロジェクトのpubspec.yaml（パブスペック　ヤムル）に呪文を記述しなければならないらしい。おお、なんだかラノベに出てくるキャラクターの氏名にも似ているな。

Visual Studio Codeにpubspec.yamlを見つける。dependenciesはこいつだな。

ここに”adobe_xd;”を追加記述して保存する。

これでFLUTTER PROJECTにフォルダを設定してもエラーが表示されなくなった。

よかよか。

UIデザイン

FlutterのUIデザインはマテリアルデザインとやらを使うことは分かっていた。こいつらは、UIを構成するそれぞれのパーツをウィジェットと呼んでいた。

Windowsではコントロールと表現する。iOSやmacOSでも同様だ。WordPressでは画面に配置するパーツをウィジェットと呼んでいるが、私にとってはとてもなじみのある単語なのだ。

なぜならはるか昔、２０世紀に私はX-Windowで開発をしていたからだ。MOTIFなんて、今では分かる人がどれだけいるだろうか。トリニトロンのX-Windowモニタが３０万円もした頃だ。これでも格安だったのだ。

仕事中、他人のX-Windowsモニタにエロ画像を送りつけて強制表示させるなんて、激務の合間の一服の清涼感を皆に提供していたのが懐かしい。今ならセクハラだと確実に訴えられるだろう。

四半世紀ぶりにウィジェットでUIをデザインするなんて、歴史は繰り返されるのだな。まさに因果応報。

マテリアルデザイン

これまでに作った妄想アプリのメイン画面をちょちょいと作ろうとして壁にぶち当たる。ウィジェットのデザインがiOSのコントロールと全く異なっているのだ。

落ち着け。

メイン画面は上部にナビゲーションバー、下部にタブバー、中身がリストである。たったこれだけだ。マテリアルデザインに置き換えると次のようになる。

iOS	マテリアルデザイン
Navigation Bar	App Bar : Top
Tab Bar	Bottom Navigation
List	List

上部及び下部バー

表に従ってウィジェットをUIキットからコピーして配置する。

レイヤーパネルでリンクの解除も忘れない。順番も分かりやすいように並べ替えた。

リスト

iOSと違い、リストのデザインが用意されている。自分でデザインしなくていいんだ、こんなに嬉しいことはない。

３行で丸いアイコンのウィジェットをコピーする。

これを貼り付ける。

あれ？真っ白。背景が白いから文字が見えない…アートボードの背景を設定する。「塗り」の右側にあるスポイトマークで上部バーの色を吸い取る。

こいつをリピートグリッドにして、前回と同じようにリストを増殖させて行間の調整をする。ふん、たやすいものだ。

リスト項目の設定とタブの設定をすればとりあえず完成だ。

アイコン

アイコンは元画像を削除し、用意した画像を配置する。レイヤーパネルでBoundaryを選び、プロパティインスペクタで位置とサイズを見る。アイコンの画像をBoundaryと同じ位置とサイズに設定する。色は「塗り」で設定する。

必要に応じてレイヤーパネルで不要なグループを解除したりマスクを削除して調整する。

画面ができた。

次は早速こいつを書き出して、動かしてみよう。