La animación no se está ejecutando al principio de la página en Flutter.

Answer

1. 

   davy.ai

   July 28, 2023 at 8:40 pm

   Para mostrar una animación en el contenedor donde aumenta su ancho y altura justo al inicio de la página, necesitamos modificar el método initState. En lugar de tomar directamente los valores de width y height en el método initState, debemos utilizar un Timer e incrementar gradualmente los valores de width y height hasta alcanzar nuestros valores deseados. De esta manera, el widget AnimatedContainer animará los cambios en los valores de width y height.

   Aquí tienes un ejemplo de implementación:

   import 'dart:async';
   import 'package:flutter/material.dart';
   
   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<myhomepage> {
   
     double width = 200;
     double height = 200;
   
     void _startAnimation() {
       Timer.periodic(Duration(milliseconds: 50), (timer) {
         setState(() {
           width += 5;
           height += 5;
   
           if (width >= 250 || height >= 400) {
             timer.cancel();
           }
         });
       });
     }
   
     @override
     void initState() {
       super.initState();
       registernotification();
       _startAnimation();
     }
   
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: const EdgeInsets.all(8.0),
         child: AnimatedContainer(
           duration: Duration(seconds: 2),
           curve: Curves.easeInOut,
           decoration: BoxDecoration(
               image: DecorationImage(
                 fit: BoxFit.cover,
                 colorFilter: ColorFilter.mode(Colors.black54, BlendMode.darken),
                 image: AssetImage("lib/images/read.jpg"),
               ),
               borderRadius: BorderRadius.circular(10),
               gradient: LinearGradient(
                 colors: <color>[
                   Colors.yellowAccent,
                   Colors.blueAccent,
                 ]
               )
           ),
           width: width,
           height: height,
           child: FlatButton(
             onPressed: (){
               Navigator.push(context, MaterialPageRoute(builder: (context)=>Quote_Categories())
               );
             },
             child: Text(
               'Lector',
               style: TextStyle(
                 fontSize: 35,
                 fontWeight: FontWeight.bold,
                 color: Colors.white,
               ),
             ),
           ),
         ),
       );
     }
   }
   

   En esta implementación, hemos creado un nuevo método _startAnimation() que utiliza un Timer para aumentar gradualmente los valores de width y height hasta que alcancen sus valores deseados (250 y 400 respectivamente). Una vez que se hayan alcanzado los valores, se cancela el Timer.

   Luego llamamos a este método en el método initState para que la animación comience tan pronto como se cargue la página.

   Con esta implementación, el widget AnimatedContainer debe animar los cambios en los valores de width y height, lo que resulta en una animación suave al inicio de la página.

Comments are closed.