I have an error in the code because of safety in Flutter and I have tried to solve it with the declaration of variables using LATE.<br /

But it appears antother one when I try to build it:

Error

This is my code:

class AnimacionesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CuadradoAnimado(),
      ),
    );
  }
}

class CuadradoAnimado extends StatefulWidget {
  @override
  _CuadradoAnimadoState createState() => _CuadradoAnimadoState();
}

class _CuadradoAnimadoState extends State<CuadradoAnimado>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> rotacion;

@override
  void initState() {
    controller = new AnimationController(
        vsync: this, duration: Duration(milliseconds: 4000));

    rotacion = Tween(begin: 0.0, end: 2 * Math.pi)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeOut));

 @override
  Widget build(BuildContext context) {
    // Play / Reproducción
    controller.forward();

    return AnimatedBuilder(
      animation: controller,
      child: _Rectangulo(),

CodePudding user response：

try this

     class _CuadradoAnimadoState extends State<CuadradoAnimado>
                with SingleTickerProviderStateMixin {
              AnimationController? controller;
              Animation<double>? rotacion;
            
            @override
              void initState() {
                controller = new AnimationController(
                    vsync: this, duration: Duration(milliseconds: 4000));
            
                rotacion = Tween(begin: 0.0, end: 2 * Math.pi)
                    .animate(CurvedAnimation(parent: controller, curve: Curves.easeOut));
             controller.forward();
setState((){});
    }
             @override
              Widget build(BuildContext context) {
                // Play / Reproducción
               
            
                return controller==null && rotacion==null ? CircularProgressIndicator.adaptive():  AnimatedBuilder(
                  animation: controller!,
                  child: _Rectangulo());

CodePudding user response：

Hey Ignacio and welcome to the StackOverFlow community

It should work well but try to correct a few things.

At first this is a snippet of code that will explain something like what you want to do:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> rotacion;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 4000));

    rotacion = Tween<double>(begin: 0.0, end: 250)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeOut));
    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
          animation: rotacion,
          builder: (context, _) {
            return Container(
              margin: const EdgeInsets.symmetric(vertical: 10),
              height: rotacion.value,
              width: rotacion.value,
              child: const FlutterLogo(),
            );
          }),
    );
  }
}

The first thing (you may forget to add it but it's just a reminder), make sure to close the curly braces of the init state and any other syntax issues.

The second thing is that you should forward the controller in the init state, not in the build because you want to forward it the first time, not every time you build the component.

The third point is the widget that I want to make the animation in, I wrapped it with another widget called AnimatedBuilder: it's a general-purpose widget for building animations (There are other ways to create the animation for sure).

The final point is that don't forget to dispose your controller, because you need to release the resources used by this object because when the widget disposed, the object is no longer usable.

If you did all of that (and make sure to read the snippet of code), it will work very well.