もっぺんプログラミング(´・ω・`)

もっぺん頑張って副業プログラマを目指してます。

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から。 背景色を変えて、ショピングカートのアイコンを配置しました。

f:id:momoizo:20200516031726p:plain

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)),
        )
      ),
    );
  }

カテゴリが一つ表示されました。

f:id:momoizo:20200516040634p:plain
カテゴリ表示

カテゴリをもう少し増やしてみます。

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')),
  ],
)

f:id:momoizo:20200516041605p:plain

カテゴリが増えました!

最後に、カテゴリの表示を調整します。

f:id:momoizo:20200516133706p:plain
変更前のカテゴリ

  Widget makeCategory({isActive, title}) {
    return AspectRatio (
      aspectRatio: isActive ? 3 : 2.5 / 1,

Activeではない場合の aspectRatio を 2.0 / 1 → 2.5 / 1 に変更しました。

f:id:momoizo:20200516133853p:plain
変更後のカテゴリ

すこし広めのゆったりサイズになりました。

つづきます。

Flutter モバイルアプリ開発バイブル

Flutter モバイルアプリ開発バイブル