【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part116 アニメーション系ウィジェット
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part116 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part115 アニメーション系ウィジェット
引き続き、アニメーション系について学びます。
AnimatedControllerクラスを利用するウィジェット
FadeTransitionウィジェット
FadeTransiton
ウィジェットを使用して浮かび上がるようなアニメーションを実装してみます。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController? _controller;
// xxxTransitionウィジェットでは必須です。
// 不変の場合hあフィールドで保持します。
// 処理が重たいのかな?
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 3),
);
_animation = _controller!.drive(
// Tweenはいろいろな実装があるようです。
Tween(
begin: 0.0,
end: 1.0,
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'テスト中!',
theme: ThemeData(primarySwatch: Colors.blue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: FadeTransition(
opacity: _animation!,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_controller!.forward();
},
child: Icon(Icons.add),
),
),
);
}
}
最後に
思っていたいよりはコード数は少ないですがAnimatedxxx
ウィジェットよりはさすがに多いですね。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません