Flutter生活5日目 コンポーネントカタログの続き

こんばんはファームノートの菅原です。
今日はコンポーネントカタログの続きです。
昨日のバージョンでは、iOSでコンポーネントを表示した場合の戻る導線がなかったのと、複数のサンプル的な見せ方ができなかったのでその辺を調整しました。

まずは複数のpropsバリエーションを表示できるようにしてみました。

バリエーションのデータクラスを作る

class CatalogData {
  final String subject;
  final Widget widget;
  final String desc;

  CatalogData(this.widget, {this.subject, this.desc});
}

View側を作る
Cardを利用してみました。
ちなみに、buildのchildrenにnull渡すとなんかエラー出るっぽいことがわかったので、nullが入らないようにフィルタリングしておきました。
iOSでリストに戻る導線がないので、ダブルタップで閉じれるようにしました。（アプリにダブルタップ仕込むつもりがないので競合しない。）

class CatalogCard extends StatelessWidget {
  final String title;
  final List<CatalogData> widgets;

  CatalogCard(this.widgets, this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onDoubleTap: () => Navigator.pop(context),
        child:Container(
          child:
            ListView.builder(
              itemBuilder: (context, int index) =>
                  Card(
                      child: Padding(
                          padding: EdgeInsets.only(bottom: 32.0),
                          child:Column(
                            children: [
                              widgets[index].subject != null ? ListTile(
                                title: TypoGraphTitle(widgets[index].subject, type: TypoGraphTitleType.Three,),
                              ): null,
                              widgets[index].widget,
                              widgets[index].desc != null ? Padding(
                                padding: EdgeInsets.only(top: 16),
                                child:Text(widgets[index].desc, style: TextStyle(color: Colors.red),)
                              ): null
                            ].where((child) => child != null).toList(),
                          ),
                        )
                  ),
              itemCount: widgets.length,
            ),
          ),
      )
    );
  }
}

昨日作ったCatalogListにCatalogCardを引数とするように調整してみました。

class CatalogList extends StatelessWidget {
  final List<CatalogCard> items;

  CatalogList(this.items);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) => ListTile(
          title: TypoGraphTitle(
            items[index].title,
            type: TypoGraphTitleType.Three,
          ),
          onTap: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => items[index]));
          }),
      itemCount: items.length,
    );
  }
}

こんな風に使います

CatalogList([
    CatalogCard([
            CatalogData(TypoGraphTitle('TypoGraphTitle-1'), subject: 'title-1', desc: '説明'),
            CatalogData(TypoGraphTitle('TypoGraphTitle-2', type: TypoGraphTitleType.Two,), subject: 'title-2'),
            CatalogData(TypoGraphTitle('TypoGraphTitle-3', type: TypoGraphTitleType.Three), subject: 'title-3'),
        ],
        'TypoGraphTitle'
    )
])
...

FullScreenで扱いたい

templateレベルは画面全体使いたいので画面にFitする仕組みを用意します。

画面レベルのコンポーネントを表示させるためのカードを作成
綺麗に書くならabstractにして継承した方が良いんだろうなぁと思いつつ単なる継承です。手抜きです。

class CatalogCardSingle extends CatalogCard {
  final Widget widget;

  CatalogCardSingle(this.widget): super([CatalogData(widget)], widget.runtimeType.toString());

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: widget,
      onDoubleTap: () => Navigator.pop(context),
    );
  }
}

画面を配置してみる
まぁシンプルです。

CatalogList([
                CatalogCardSingle(Search()),
                CatalogCardSingle(NotificationList()),
                CatalogCardSingle(DashBoard()),
                CatalogCardSingle(CowDetail()),
              ])

今日はこんな所