¿Cómo rotar una imagen usando Flutter AnimationController y Transform?

Presta atención ya que en esta reseña vas a encontrar el resultado que buscas.

Ejemplo completo:

Presiona “ir” hace que el ícono de la estrella gire hasta que presionas “detener”.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State with SingleTickerProviderStateMixin 
  AnimationController _controller;

  @override
  void initState() 
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    );
    super.initState();
  

  @override
  void dispose() 
    _controller.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
              child: Icon(Icons.stars),
            ),
            RaisedButton(
              child: Text("go"),
              onPressed: () => _controller.forward(),
            ),
            RaisedButton(
              child: Text("stop"),
              onPressed: () => _controller.reset(),
            ),
          ],
        ),
      ),
    );
  

Guía paso por paso:

Primero, deje que la clase de estado de su widget se implemente SingleTickerProviderStateMixin.

En segundo lugar, defina un AnimationController y no olvides desecharlo.

AnimationController _controller;

@override
void initState() 
  _controller = AnimationController(
    duration: const Duration(milliseconds: 5000),
    vsync: this,
  );
  super.initState();


@override
void dispose() 
  _controller.dispose();
  super.dispose();

Entonces envuelve tu Widget con RotationTransition.

RotationTransition(
  turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
  child: Icon(Icons.stars),
),

Finalmente, llame a métodos en el AnimationController para iniciar / detener la animación.

• Ejecute la animación una vez, use ::forward
• Repetir indefinidamente, utilizar ::repeat
• Deténgase inmediatamente, use ::stop
• Deténgalo y vuelva a colocarlo en la rotación original, use ::reset
• Deténgase y anime a una rotación, use ::animateTo

Aquí mi ejemplo de imagen giratoria. No lo sé, pero tal vez te quede bien

AnimationController rotationController;

@override
void initState() 
  rotationController = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
  super.initState();

//...
RotationTransition(
  turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),
  child: ImgButton(...)
//...
rotationController.forward(from: 0.0); // it starts the animation

UPD – cómo resolver un problema con Transform.rotate

En su caso, todo funciona exactamente como lo ha escrito: gira la imagen de 0.0 a 1.0 (son los parámetros predeterminados para AnimationController). Para un círculo completo, debe establecer el parámetro superior en 2 * pi (desde math paquete)

import 'dart:math';
//...
animationController = AnimationController(vsync: this, duration: Duration(seconds: 5), upperBound: pi * 2);

Captura de pantalla:

---

Código completo:

class _MainPageState extends State with SingleTickerProviderStateMixin 
  AnimationController _controller;

  @override
  void initState() 
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, child) 
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
              child: child,
            );
          ,
          child: FlutterLogo(size: 200),
        ),
      ),
    );
  

Te mostramos comentarios y valoraciones

Si te apasiona este mundo, puedes dejar una sección acerca de qué te ha impresionado de este ensayo.

---

---

Utiliza Nuestro Buscador