Cómo rotar un Container en Flutter con Transform
El widget Container no tiene una propiedad específica para gestionar la rotación directamente, pero se puede utilizar el widget Transform.rotate para este propósito. Este widget permite girar un elemento secundario (por ejemplo, un Container) según un ángulo dado en radianes.
A continuación, un ejemplo de código para girar un Container con el widget Transform, utilizando 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; // Valor del Slider
double _angle = 0.0; // Ángulo en radianes
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Rotación de 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; // Conversión a radianes para Transform
});
},
),
Text('Rotación: ${_rotate.toStringAsFixed(0)}°')
],
),
),
);
}
}Explicación del código :
- Transform.rotate(angle: _angle, child: …): Aplica una rotación en radianes.
- Slider: Permite al usuario modificar el ángulo de rotación de 0° a 360°.
- Conversión de grados a radianes:
_angle = (_rotate * pi) / 180;
Valores útiles de rotación
Para trabajar con ángulos en Flutter, es recomendable convertir los grados a radianes. Aquí algunos valores comunes:
| Grados | Radianes (π) | Radianes (valor numérico) |
|---|---|---|
| 0° | 0 | 0.0 |
| 90° | π/2 | 1.5708 |
| 180° | π | 3.1416 |
| 270° | 3π/2 | 4.7124 |
| 360° | 2π | 6.2832 |
Por ejemplo, aquí tienes un Container girado a 90°:
Transform.rotate(
angle: pi / 2, // 90°
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
)
