虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterでスプラッシュアニメーションを作る

f:id:superman199323:20181106095258j:plain

Flutterでスプラッシュアニメーションを作る

自分の作ったGroupAlbumではスプラッシュアニメーションを実装しています。

f:id:superman199323:20181106094739g:plain

実装方法について紹介します。

コード

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:group_snap_app/helper/SplashHelper.dart';
import 'package:group_snap_app/Compornents/Home.dart';
import 'package:group_snap_app/Compornents/GroupSnapStart.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter/cupertino.dart';

// ---------
// スプラッシュ
// ---------
class Splash extends StatefulWidget {
  @override
  _SplashState createState() => new _SplashState();
}

class _SplashState extends State<Splash>
    with SingleTickerProviderStateMixin<Splash> {
  bool isLogin = false;
  AnimationController _animationController;
  Animation<double> _tweenAnimation;
  SplashHelper _helper = SplashHelper();
  bool _visible = true;

  @override
  void initState() {
    super.initState();
    _initIsLogin();
    _setAnimation();
    new Future.delayed(const Duration(seconds: 1))
        .then((value) => handleTimeout());
  }

  _initIsLogin() async {
    final pref = await SharedPreferences.getInstance();
    setState(() {
      isLogin = _helper.isLogin(pref.getBool("isLogin"));
    });
  }

  _setAnimation() async {
    _animationController =
        AnimationController(duration: Duration(milliseconds: 400), vsync: this);
    _tweenAnimation =
        Tween(begin: 300.0, end: 250.0).animate(_animationController);
    _tweenAnimation.addListener(() => setState(() {}));
    await _animationController.forward();
    await _animationController.reverse();
  }

  @override
  Widget build(BuildContext context) {
    var icIcon = new AssetImage('assets/ic_icon.png');
    return new Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 400),
          child: Image(
            image: icIcon,
            width: _tweenAnimation.value,
            height: _tweenAnimation.value,
          ),
        ),
      ),
    );
  }

  void handleTimeout() {
    setState(() {
      _visible = !_visible;
    });
    new Future.delayed(const Duration(milliseconds: 200)).then((value) {
      // ここでメインの画面に遷移させる
    });
  }
}

Flutterのアニメーションもなかなか大変ですが、使ってみるのもありだと思います。