Contenidor i commutador animats en Flutter

Bloc

Introducció:

Flutter té molts ginys amb animacions explícites, però també n’hi ha que tenen animacions implícites, algunes de bones _AnimatedContainer _ i _ AnimatedSwitcher._

Contenidor animat

Com el seu propi nom indica que és una mena de '_container' que us animen cada vegada que el reconstruïu. Atributs de _AnimatedContainer _ són els mateixos que els de _Contenidor _ excepte que té un atribut addicional ' durada ' , proporciona una forma perfecta de passar al valor canviat.

Podeu construir-lo una vegada amb atributs específics, com ara el color i l’alçada. I quan es reconstrueix amb valors diferents, en resposta a _setState _ anomenada. _AnimatedContainer _ realitzarà una animació lineal sense costures al valor canviat. i és més que només color, alçada, podeu animar les vores, els radis de les vores, les imatges de fons, les ombres, el degradat i la forma, etc.

class SlideUpContainer extends StatefulWidget { @override _SlideUpContainerState createState() => _SlideUpContainerState(); } class _SlideUpContainerState extends State { double containerHeight = 150; double containerWidth = 150; @override Widget build(BuildContext context) { return Center( child: GestureDetector( onTap: () { setState((){ containerHeight = containerHeight == 150 ? 250 : 150; containerWidth = containerWidth == 150 ? 250 : 150; }); }, child: AnimatedContainer( color: Colors.blue, height: containerHeight, width: containerWidth, duration: Duration(milliseconds: 600), ), ); } }

En el codi anterior, hem utilitzat Giny amb estat per presenciar els canvis realitzats durant la interpolació entre dos valors. Així, quan farem clic al contenidor, podrem veure l'animació.

#animació #flutter # flutter-widget

medium.com

Contenidor i commutador animats en Flutter

Flutter té molts ginys amb animacions explícites, però també hi ha ginys amb animacions implícites, alguns bons són AnimatedContainer i AnimatedSwitcher. Contenidor i commutador animats en Flutter