Tourner un Container dans Flutter avec le widget Transform

Comment tourner un Container dans Flutter avec Transform

Le widget Container ne propose pas de propriété pour directement gérer une rotation, mais il est possible d’utiliser le widget Transform.rotate dans ce but. Ce widget permet de tourner un enfant (par exemple un Container) en fonction d’un angle donné en radians.

Voici un exemple de code permettant de faire tourner un Container avec le widget Transform, avec un Slider :

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _rotate = 0.0; // Valeur du Slider
  double _angle = 0.0; // Angle en radians

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Rotation d’un Container')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Transform.rotate(
              angle: _angle,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            Slider(
              value: _rotate,
              min: 0,
              max: 360,
              onChanged: (double newValue) {
                setState(() {
                  _rotate = newValue;
                  _angle = (_rotate * pi) / 180; // Conversion en radians pour l'utiliser dans le widget Transform
                });
              },
            ),
            Text('Rotation: ${_rotate.toStringAsFixed(0)}°')
          ],
        ),
      ),
    );
  }
}

Explication :

Transform.rotate(angle: _angle, child: ...) : applique une rotation en radians.
Slider : permet à l’utilisateur de modifier l’angle de rotation de 0° à 360°.
Conversion degrés → radians : _angle = (_rotate * pi) / 180;

Valeurs utiles de rotation

Pour travailler avec des angles, le mieux est de convertir vos degrés en radian. Voici quelques valeurs courantes :

Degrés	Radians (π)	Radians (valeur numérique)
0°	0	0.0
90°	π/2	1.5708
180°	π	3.1416
270°	3π/2	4.7124
360°	2π	6.2832

Par exemple, voilà un Container tourné à 90° :

Transform.rotate(
  angle: pi / 2, // 90°
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)