Flutter動画やってみよ(Foodアプリ)２/５ - もっぺんプログラミング(´・ω・｀)

今回も、Youtubeで見かけた Flutter UI作成動画をなぞります。

前回は、こちら。 Flutter UI作成動画やってみよ（Foodアプリ）その１ - もっぺんプログラミング(´・ω・｀)

フォントを変更する

フォントもassetsとして扱うことで、読み込むことが出来るようです。

フォントは、ここからダウンロード出来ます。 Flutter-food-delivery-app-ui/assets/fonts at master · afgprogrammer/Flutter-food-delivery-app-ui · GitHub

アセットとして利用出来るように、pubspec.yaml に fonts 以下を追加します。

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
        - asset: assets/fonts/Roboto-Light.ttf

アプリのテーマに、上記で定義したフォントファミリーを指定します。

void main() => runApp(
  MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(fontFamily: 'Roboto'),

リロードすると、フォントが適用されます。
（稲妻マークのリロードが必要だと思います。）

f:id:momoizo:20200514033124p:plain

アニメーションを追加する。

アニメーションの動作を加えるWidgetを作成します。

lib の下に、animations フォルダを作成し、FadeAnimation.dart ファイルを作成します。
StatelessWidget で FadeAnimation というクラス名にします。

※動画では、StatefulWidgetで作成していますが、後でStatelessWidgetに修正していました。ですので、StatelessWidget で作成します。

f:id:momoizo:20200514032832p:plain

アニメーションで使う外部ライブラリの追加。

pubspec.yaml に、以下のライブラリを追加

dev_dependencies:
  flutter_test:
    sdk: flutter
  simple_animations: ^1.3.3
  page_transition: ^1.1.5

動画で設定しているバージョンと異なっています。
ライブラリのバージョンは、以下のサイトでチェックして設定しました。

Dart packages

simple_animations の最新ライブラリは、2.2 系でしたが
最新バージョンにすると、使用しているクラスが Duplicated になっていたので
一旦は、動画と同じバージョンで進めます。

Visual Studio Code の flutter pub get が終了しない場合は
コマンドラインから、flutter pub get を実行してみることをおすすめします。

ログから終わらない原因が分かる場合があります。

作成した FadeAnimation クラスのコードを以下のように修正します。

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';

class FadeAnimation extends StatelessWidget {
  final double delay;
  final Widget child;

  const FadeAnimation(this.delay, this.child);

  @override
  Widget build(BuildContext context) {
    final tween = MultiTrackTween([
      Track('opacity').add(Duration(milliseconds: 500),
        Tween(begin: 0.0, end: 1.0)
      ),
      Track('translateX').add(Duration(milliseconds: 500),
        Tween(begin: 120.0, end: 0.0),
        curve: Curves.easeOut
      )
    ]);
    return ControlledAnimation(
      delay: Duration(milliseconds: (500 * delay).round()),
      duration: tween.duration,
      tween: tween,
      child: child,
      builderWithChild: (context, child, animation) => Opacity(
        opacity: animation['opacity'],
        child: Transform.translate(
          offset: Offset(animation['translateX'], 0),
          child: child,
        ),
      ),
    );
  }
}

次に、StarterPage を修正して組み込みます。
先程作ったWidgetツリーの間に、FadeAnimation を挟んでいっています。

FadeAnimation のコンストラクタは、１つ目の引数で遅延時間、２つ目の引数で子Widgetツリーを渡します。

          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Column(
　　　　...
              children: <Widget>[
                FadeAnimation(.5, Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, ))),
                SizedBox(height: 20, ),
                FadeAnimation(1, Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18))),
                SizedBox(height: 100, ),
                FadeAnimation(1.2,
                Container(
   　　　　...