import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: CompleteScreen(),
),
));
}
class CompleteScreen extends StatefulWidget {
@override
_CompleteScreenState createState() => _CompleteScreenState();
}
class _CompleteScreenState extends State<CompleteScreen> with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _rotationAnimation;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
// --------------------------- アニメーション ---------------------------
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000), // アニメーションの時間
);
// 回転アニメーション
_rotationAnimation = Tween<double>(begin: 0.0, end: 2 * 3.14159).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
);
// 拡大アニメーション
_scaleAnimation = Tween<double>(begin: 0.1, end: 2).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
);
// アニメーションを開始
_controller.forward();
// -------------------------------------------------------------------
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform.rotate(
angle: _rotationAnimation.value, // 回転
child: Transform.scale(
scale: _scaleAnimation.value, // 拡大
child: Icon(
Icons.check,
size: 100,
color: Colors.blue,
),
),
);
},
),
),
);
}
}
<aside> <img src="/icons/info-alternate_lightgray.svg" alt="/icons/info-alternate_lightgray.svg" width="40px" />
このページに載っているコードは、自由にお使いいただいて構いません。
(使用に伴い発生した損害などに対して一切責任は負いませんので、あくまで自己責任でご使用ください)
掲載している内容に間違いやミスを発見した場合、面倒でなければ、ご連絡いただければ幸いです。 </aside>