Flutterでアニメーションをやってみた

こんにちは、株式会社PentagonでFlutterを使ったアプリ開発をしているd-ariakeです。

今日はFlutterでアニメーションさせる方法を学んだので、簡単なサンプルを作ってみました。

FlutterでアニメーションをさせるにはAnimationControllerを使うみたいです!

.drive()でTweenなどのAnimatableを与えて値を変換し、Transition系Widgetに渡してあげた状態でAnimationControllerの.foward()を呼んでやればいいみたいです!

できあがったサンプルアプリとコードは以下のとおりです!

import 'package:flutter/material.dart';

void main() {
 runApp(
   MaterialApp(
     title: 'TestApp',
     theme: ThemeData(primarySwatch: Colors.blue),
     home: MyPage(),
   ),
 );
}

class MyPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => MyPageState();
}

class MyPageState extends State<MyPage> with SingleTickerProviderStateMixin {
 AnimationController controller;
 Animation<Alignment> alignment;

 @override
 void initState() {
   super.initState();

   controller = AnimationController(
     vsync: this,
     duration: const Duration(milliseconds: 1000),
   );
   alignment = controller
       .drive(
         CurveTween(curve: Curves.bounceOut),
       )
       .drive(
         AlignmentTween(begin: Alignment.bottomCenter, end: Alignment.center),
       );

   controller.forward();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('TestApp')),
     body: Center(
       child: AlignTransition(
         alignment: alignment,
         child: const FlutterLogo(size: 128),
       ),
     ),
     floatingActionButton: FloatingActionButton(
       child: const Icon(Icons.play_arrow),
       onPressed: () {
         controller.reset();
         controller.forward();
       },
     ),
   );
 }

 @override
 void dispose() {
   controller.dispose();
   super.dispose();
 }
}

みなさんもアニメーションを使っていきましょう!