Flutter動画やってみよ(Foodアプリ)4/5
YoutubeのFlutter UI作成動画トライの続きです。
トップ画面が出来たので、遷移先の商品選択ページを作って行きます。
HomePage.dart を編集していきます。 まずは、Scaffoldの背景色などを整えましょう。
class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[100], appBar: AppBar( backgroundColor: Colors.grey[100], elevation: 0, brightness: Brightness.light, leading: Icon(null), actions: <Widget>[ IconButton( onPressed: () {}, icon: Icon(Icons.shopping_basket, color: Colors.grey[800], ), ) ],
まずは、AppBarから。 背景色を変えて、ショピングカートのアイコンを配置しました。
Bodyに見出しをつけます。
body: SafeArea( child: Column( children: <Widget>[ Padding( padding: EdgeInsets.symmetric(horizontal: 20.0), child: Column( children: <Widget>[ FadeAnimation(1, Text('Food Delivery', style: TextStyle(color: Colors.grey[80], fontWeight: FontWeight.bold, fontSize: 30),)), ], ), ) ], ), )
animations の下に作成した、FadeAnimation を利用して 見出しにフェードインのアニメーションをつけます。
次に、カテゴリのタグを表示します。
見出しの下につけていきます。
children: <Widget>[ FadeAnimation(1, Text('Food Delivery', style: TextStyle(color: Colors.grey[80], fontWeight: FontWeight.bold, fontSize: 30),)), SizedBox(height: 20,), Container( height: 50, child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ FadeAnimation(1, makeCategory(isActive: true, title: 'Pizza')), ], ) ) ],
makeCategory関数を作って、カテゴリを表示するWidgetを用意します。
Widget makeCategory({isActive, title}) { return AspectRatio ( aspectRatio: isActive ? 3 : 2.0 / 1, child: Container( margin: EdgeInsets.only(right: 10), decoration: BoxDecoration( color: isActive ? Colors.yellow[700] : Colors.white, borderRadius: BorderRadius.circular(50), ), child: Align( child: Text(title, style: TextStyle(color: isActive ? Colors.white : Colors.grey[500], fontSize: 18, fontWeight: isActive ? FontWeight.bold : FontWeight.w100)), ) ), ); }
カテゴリが一つ表示されました。
カテゴリをもう少し増やしてみます。
Column に CrossAxisAlignment.start を指定して、左寄せにします。
child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ FadeAnimation(1, Text('Food Delivery', style: TextStyle(color: Colors.grey[80], fontWeight: FontWeight.bold, fontSize: 30),)),
カテゴリを固定で増やします。
child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ FadeAnimation(1, makeCategory(isActive: true, title: 'Pizza')), FadeAnimation(1.3, makeCategory(isActive: false, title: 'Burgers')), FadeAnimation(1.4, makeCategory(isActive: false, title: 'Kebab')), FadeAnimation(1.5, makeCategory(isActive: false, title: 'Desert')), FadeAnimation(1.6, makeCategory(isActive: false, title: 'Salad')), ], )
カテゴリが増えました!
最後に、カテゴリの表示を調整します。
Widget makeCategory({isActive, title}) { return AspectRatio ( aspectRatio: isActive ? 3 : 2.5 / 1,
Activeではない場合の aspectRatio を 2.0 / 1 → 2.5 / 1 に変更しました。
すこし広めのゆったりサイズになりました。
つづきます。