La traducción se preparó como parte del curso " Flutter Mobile Developer " .
Invitamos a todos los asistentes al segundo día del intensivo online de dos días “Creamos una aplicación en Flutter para Web, iOS y Android” . Seguimos escribiendo la aplicación (esta será una aplicación de red: cargando una lista de entidades + filtrándolas + haciendo un bloque de ajustes en la aplicación, donde se puede cambiar el tema de la aplicación (colores)). ¡Únete a nosotros!
Cuando vi el widget por primera vez AnimationSwitcher
, pensé que podría darle la vuelta abriendo su parte posterior.
Me equivoqué: AnimationSwitcher
permite ... cambiar entre diferentes widgets con la animación que especificó (la animación predeterminada es una transición de desvanecimiento). Este componente es demasiado versátil para este propósito.
, , .
flutter, -, animated_card_switcher, , , , .
:
AnimationSwitcher
.
, .
, , , , AnimationSwitcher
, (, , ).
, :
Widget __buildLayout({Key key, String faceName, Color backgroundColor}) {
return Container(
key: key,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
color: backgroundColor,
),
child: Center(
child: Text(faceName.substring(0, 1), style: TextStyle(fontSize: 80.0)),
),
);
, :
Widget _buildFront() {
return __buildLayout(
key: ValueKey(true),
backgroundColor: Colors.blue,
faceName: "F",
);
}
Widget _buildRear() {
return __buildLayout(
key: ValueKey(false),
backgroundColor: Colors.blue.shade700,
faceName: "R",
);
}
AnimationSwitcher
AnimationSwitcher
.
StatefulWidget
build
, , .
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _displayFront;
bool _flipXAxis;
@override
void initState() {
super.initState();
_displayFront = true;
_flipXAxis = true;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.widget.title),
centerTitle: true,
),
body: Center(
child: Container(
constraints: BoxConstraints.tight(Size.square(200.0)),
child: _buildFlipAnimation(),
),
);
}
}
_build Flip Animation
, .
:
Widget _buildFlipAnimation() {
return GestureDetector(
onTap: () => setState(() =>_showFrontSide = !_showFrontSide),
child: AnimatedSwitcher(
duration: Duration(milliseconds: 600),
child: _showFrontSide ? _buildFront() : _buildRear(),
),
);
}
, , , . , .
Y. , AnimationSwitcher
, transitionBuilder
.
, : 180° (pi). AnimatedBuidler
Transform
.
Widget __transitionBuilder(Widget widget, Animation<double> animation) {
final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
return AnimatedBuilder(
animation: rotateAnim,
child: widget,
builder: (context, widget) {
return Transform(
transform: Matrix4.rotationY(value),
child: widget,
alignment: Alignment.center,
);
},
);
}
, , . , .
, .
:
: .
.
layoutBuilder
AnimationSwitcher
.
layoutBuilder: (widget, list) => Stack(children: [widget, ...list]),
, , pi/2 0.0. () .
Widget __transitionBuilder(Widget widget, Animation<double> animation) {
final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
return AnimatedBuilder(
animation: rotateAnim,
child: widget,
builder: (context, widget) {
final isUnder = (ValueKey(_showFrontSide) != widget.key);
final value = isUnder ? min(rotateAnim.value, pi / 2) : rotateAnim.value;
return Transform(
transform: Matrix4.rotationY(value),
child: widget,
alignment: Alignment.center,
);
},
);
}
, ! , , "tilt" () .
"" 0,0 . , , . , 0,2, -0,2.
, Matrix4, .
Widget __transitionBuilder(Widget widget, Animation<double> animation) {
final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
return AnimatedBuilder(
animation: rotateAnim,
child: widget,
builder: (context, widget) {
final isUnder = (ValueKey(_showFrontSide) != widget.key);
var tilt = ((animation.value - 0.5).abs() - 0.5) * 0.003;
tilt *= isUnder ? -1.0 : 1.0;
final value = isUnder ? min(rotateAnim.value, pi / 2) : rotateAnim.value;
return Transform(
transform: Matrix4.rotationY(value)..setEntry(3, 0, tilt),
child: widget,
alignment: Alignment.center,
);
},
);
}
, , AnimationSwitcher.
:
Widget _buildFlipAnimation() {
return GestureDetector(
onTap: _switchCard,
child: AnimatedSwitcher(
duration: Duration(milliseconds: 4600),
transitionBuilder: __transitionBuilder,
layoutBuilder: (widget, list) => Stack(children: [widget, ...list]),
child: _showFrontSide ? _buildFront() : _buildRear(),
switchInCurve: Curves.easeInBack,
switchOutCurve: Curves.easeOutBack,
),
);
}
.
, , , . .
, flipped
, .
switchInCurve: Curves.easeInBack, switchOutCurve: Curves.easeInBack.flipped,
, : 30 ( ), ( ).
, . , (), . , , , 6 , 1 2 ...
. , ( ) “ ”, - , !
Flutter Twitter