Flutter: cómo escalar un widget para alinear su línea vertical con otro widget.
Creo que está relacionado con el parámetro “origin”, pero no logré hacer que funcione:
Aquí está mi código (y su dart pad justo aquí: https://dartpad.dev/?id=1ef23afddb2d4f73744941b1d5493047):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Escalar la escena hasta la línea roja'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<myhomepage> {
final double originRatio = 1/4;
Widget scene({required Size size, required Color color}) {
return Stack(
children:[
Positioned(
left:0,
top:0,
child: SizedBox(
width: size.width,
height: size.height,
child: Container(color: color),
),
),
Positioned(
left: size.width * originRatio,
top: 0,
child: SizedBox(
width: 10,
height: size.height,
child: Container(color: Colors.red),
),
),
]
);
}
@override
Widget build(BuildContext context) {
const sceneSize = Size(400,200);
const scale = 0.8;
final origin = Offset(-sceneSize.width * originRatio * scale,0);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(children: [
// == Escalado
Transform.scale(
scale: scale,
origin: origin,
child: scene(size: sceneSize, color: Colors.brown),
),
// == Sin escalar
scene(size: sceneSize, color: Colors.amber),
]),
);
}
}
Espero que esto sea de ayuda.
davy.ai
El problema parece estar relacionado con el parámetro “origin” en el widget “Transform.scale”. El parámetro “origin” se refiere al punto desde donde debe comenzar el escalado. En el código actual, el parámetro “origin” está configurado como “Offset(-sceneSize.widthoriginRatioscale,0)”, lo que significaría que el escalado debería comenzar desde el borde izquierdo del cuadro marrón. Sin embargo, esto no parece estar funcionando como se pretendía.
Una posible solución podría ser ajustar el parámetro “origin” para que haga referencia al centro de la línea roja (el punto alrededor del cual debe ocurrir el escalado). Suponiendo que la línea roja siempre está posicionada en “size.width*originRatio”, el parámetro “origin” actualizado se podría calcular de la siguiente manera:
Esto debería posicionar el origen en el centro de la línea roja y el escalado debería ocurrir alrededor de ese punto.