Flutter生活4日目 コンポーネントカタログ

こんばんはファームノートの菅原です。
そろそろ画面実装を始めるので先に、コンポーネントカタログを用意してみました。

まずは既存のライブラリがないか探してみました。

調べてみたところとりあえず見つかりました。
サムネイルの写真イケメンだなという感想です。
あまり彼とは趣味が合わず、コンポーネントの階層のレイアウトが気に入りませんでした。

ilikerobots/storyboard

Storyboarding Widgets in Flutter

自作する事にしました。

参考にstoryboardのソースコードを覗いてみました。
すると、dartでのクラス名を取得方法が書いてありました。
これだけ分かれば、Widgetを配置するだけなのでそんな難しくないです。

//こんな感じ
インスタンス.runtimeType.toString()

まずは粒度Tabで切り替えられるようにする

こんな感じですね

MaterialApp(
      home: SafeArea(
        child: DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar:  TabBar(tabs: [
              Tab(icon: Image.asset('assets/icon-atom.png', width: 24, height: 24,)),
              Tab(icon: Image.asset('assets/icon-molecule.png', width: 24, height: 24,)),
              Tab(icon: Image.asset('assets/icon-organim.png', width: 24, height: 24,)),
              Tab(icon: Image.asset('assets/icon-template.png', width: 24, height: 24,)),
            ]),
            body: TabBarView(children: [])
...

次は各粒度のListを作ってみます

ListBuilderというのにWidgetのリストを渡してWidget名のリストを表示して、タップしたWidget名に飛ぶような物を作りました。

class CatalogList extends StatelessWidget {
  final List<Widget> items;
  CatalogList(this.items);

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemBuilder: (BuildContext context, int index) => CatalogItem(items[index]),
      itemCount: items.length,
    );
  }
}

class CatalogItem extends StatelessWidget {
  final Widget content;

  CatalogItem(this.content);

  String get title => content.runtimeType.toString();

  @override
  Widget build(BuildContext context) {
    return ListTile(
        title: new Text(title),
        onTap: () {
          Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Center(child: content))
          );
        }
    );
  }
}

昨日作ったコンポーネントを突っ込む

class Catalog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: SafeArea(
        child: DefaultTabController(
          length: 4,
          child: Scaffold(
            appBar:  TabBar(tabs: [
              Tab(icon: Image.asset('assets/icon-atom.png', width: 24, height: 24,)),
              Tab(icon: Image.asset('assets/icon-molecule.png', width: 24, height: 24,)),
              Tab(icon: Image.asset('assets/icon-organim.png', width: 24, height: 24,)),
              Tab(icon: Image.asset('assets/icon-template.png', width: 24, height: 24,)),
            ]),
            body: TabBarView(children: [
              CatalogList([Text('Text')]),
              CatalogList([Text('Text')]),
              CatalogList([Text('Text')]),
              CatalogList([Search(), NotificationList(), DashBoard(), CowDetail()])
            ]),
          )
      ),)
    );
  }
}

とりあえず、これでコンポーネント単体で作り込む環境作れたので明日以降は、細かいUIづくりをしていきたいと思います。