ふと、カードをめくる感じのアプリが作りたくなりました。
https://github.com/fedeoo/flip_card
よさげなパッケージがあったので、これを入れるだけで終わりか？と思って試してみました。
ネイティブでは普通に動きましたが、Webだとおかしくなってしまいました。
僕のFlutterのモチベーションのほとんどは「Webでもそのまま動く」が支えているので、Webで動かないと駄目なのです…。
パッケージの中身を修正するぐらいなら自前で書くか…と思っていたらStack Overflowにいい感じのサンプルがありました。
https://stackoverflow.com/questions/44990714/flutter-effect-of-flip-card
それを簡略化したのが以下のコードです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _frontScale;
Animation<double> _backScale;
@override
void initState() {
super.initState();
_controller = new AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
_frontScale = new Tween(
begin: 1.0,
end: 0.0,
).animate(new CurvedAnimation(
parent: _controller,
curve: new Interval(0.0, 0.5, curve: Curves.easeIn),
));
_backScale = new CurvedAnimation(
parent: _controller,
curve: new Interval(0.5, 1.0, curve: Curves.easeOut),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Stack(
children: <Widget>[
AnimatedBuilder(
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
borderRadius: BorderRadius.circular(10),
color: Colors.grey[300],
),
),
animation: _backScale,
builder: (BuildContext context, Widget child) {
final Matrix4 transform = Matrix4.identity()
..scale(_backScale.value, 1.0, 1.0);
return Transform(
transform: transform,
alignment: FractionalOffset.center,
child: child,
);
},
),
AnimatedBuilder(
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
borderRadius: BorderRadius.circular(10),
color: Colors.grey[100],
),
),
animation: _frontScale,
builder: (BuildContext context, Widget child) {
final Matrix4 transform = Matrix4.identity()
..scale(_frontScale.value, 1.0, 1.0);
return Transform(
transform: transform,
alignment: FractionalOffset.center,
child: child,
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_controller.isCompleted || _controller.velocity > 0) {
_controller.reverse();
} else {
_controller.forward();
}
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
これなら、ネイティブでもWebでもそのまま動きました。
これをベースに進めて行こうと思います。
