はじめに

本稿は，クロスプラットフレームワークであるFlutterを使ってプロトタイピングをするときにどうすればいいかを雑に並べた記事です．
あくまでも個人の感想であり，「自分ならこうする」的なやつですが何かの参考になればと思います．

ターゲット

Flutterは現状モバイルに関しては1つのコードでAndroid，iOS両対応できるフレームワークで，更にデスクトップやwebの対応も進んでいます．立ち位置的には完全にエンジニアの使う開発環境という感じですが，すべてが構造的に書ける点や，組んだUIがすぐに動く点などにより，デザイナーがFlutterを使って直に組むのにも良いとされています．

参考:https://flutter.dev/docs/resources/faq#what-does-flutter-do

What does Flutter do?

For users, Flutter makes beautiful app UIs come to life.

For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up development of mobile apps and reduces the cost and complexity of app production across iOS and Android.

For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.

自分は現在高専生で，ポジション的にはエンジニア寄りですが，デザインもやりたいと思っているので，デザインも多少できるエンジニア的なのを目指してます．この記事はどちらかというとエンジニア寄りでデザインも考えたい，みたいな欲張る人のために書こうと思いました．

静的なページを何も考えずにゴリゴリ書くとき

Material Designを使っていく

これは本当に簡単です（機械翻訳感）．
Flutterの始め方とかそういうのは割愛しますが，

• flutter create ***を端末に打ち込む
• main.dartを開く
• Scaffoldあたりを書き換えてどんどんWidgetを付け足していく

くらいです．静的なMaterial Designページを作るくらいだったら，Widget一覧を見て良さげなWidgetを使っていくくらいの温度感でできます．

デザインを自分でやりたい

見た目Material Designっぽいのはイヤだなってときは，Widgetをカスタマイズして対応していきます．
基本的な流れは上記と同じですが，FlutterにはContainerやSizedBoxといった要素を入れる枠組みが存在し，その見た目をカスタマイズできるBoxDecorationなどが用意されています．
サンプルとして自分が何も考えず1時間くらいで組んだ（真似した）UIがこちらです．
https://github.com/Kurogoma4D/paepae

main.dartを見ていただければ分かると思うんですが，Containerがいっぱいあります

動的なページを作りたい / もうちょっと綺麗なコードを書きたい

プロトタイプとはいえ，やっぱり動いてほしいときがあります．UI要素を動かすためには考えることが一気に増えるわけですが，一番「どうすればいいの？」ってなるのが状態管理だと思います．

状態管理

Flutterには早くもいろいろな状態管理方法が提案されています．一番直感的で，コード量も少なく済む（？）のはStatefulWidgetを使った上でのsetState()だと思いますし，何も考えずに書くときもちょっと値を変えたいくらいだったらこれが便利です．上記paepaeでは，ボトムナビゲーションの選択時の状態管理に使っています．

bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Theme.of(context).unselectedWidgetColor,
              ),
              title: Text("ホーム")),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.attach_money,
                color: Theme.of(context).unselectedWidgetColor,
              ),
              title: Text("残高")),
         // 中略
        ],
        currentIndex: _selectedItem,
        fixedColor: Colors.blueAccent,
        onTap: _onItemTapped,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedItem = index;
    });
  }

しかし，setState()だけでは以下の問題点があります．

• そこそこの規模になった時ロジックが分散してつらくなってしまう
• 部分だけ抜き出してファイル分割したいときに，状態管理変数の置き場所に困る

そこで他の管理方法に手を付けるわけですが，どんな物があるかについてはmono氏の記事などで触れられています．
その中でも，自分がしっくり来たものを紹介します．

ChangeNotifierProvider

ざっくり説明すると，状態管理変数とそれを動かすロジックをクラスとしてまとめてしまって，それをWidgetツリーの上位の方で持っておき，変更されたらそれを使ってるWidgetを更新しようってことです．
それとなく図示したものがこちら．

(細かい部分を省略してます)

そしてこれを使った自作例がこちら
https://github.com/Kurogoma4D/ui_training_1

#DailyUI の真似事
インスタにあった良さげなメニューをFlutterで実装しました．細かいことは無視してとりあえず作ったからあとから見たらアレだ… pic.twitter.com/PZ4riRPGxu

— Kurogoma4D🗼 (@Krgm4D) June 6, 2019

// スクロールを検知したときの処理
// スクロール位置から現在のページ番号を算出し，セットしている
  void _scrollListener() {
    var model = Provider.of<AppStateModel>(context);
    double positionRate =
        _scrollController.offset / _scrollController.position.maxScrollExtent;  
    model.setIndex((positionRate * model.pageNum).toInt());
  }

// それぞれのページを生成する部分
// メニューを開いてるかどうかがAppStateModelに入っているため，
// 開いていたらスクロール可能，そうでなければスクロール不可能にしている
Consumer<AppStateModel>(
  builder: (_, model, child) {
    return SingleChildScrollView(
      controller: _scrollController,
      physics: model.isMenuOpened
          ? const BouncingScrollPhysics()
          : const NeverScrollableScrollPhysics(),
      child: Column(
        children: <Widget>[
          Page1(),
          Page2(),
          Page3(),
        ],
      ),
    );
  },
)