![見出し画像](https://assets.st-note.com/production/uploads/images/9359868/rectangle_large_type_2_fe1fab318779772f511f395b3a9b758b.png?width=1200)
Flutter生活4日目 コンポーネントカタログ
こんばんはファームノートの菅原です。
そろそろ画面実装を始めるので先に、コンポーネントカタログを用意してみました。
まずは既存のライブラリがないか探してみました。
調べてみたところとりあえず見つかりました。
サムネイルの写真イケメンだなという感想です。
あまり彼とは趣味が合わず、コンポーネントの階層のレイアウトが気に入りませんでした。
自作する事にしました。
参考に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づくりをしていきたいと思います。
ファームノートでインタラクションデザイナーやってます。 最近はFigmaとFlutterでアプリを作っています。