es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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:

enter image description here

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.

Tags:  , ,

Answer

  1. Avatar for 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:

    final origin = Offset((size.width*originRatio - (size.width*originRatio*scale))/scale, 0);
    

    Esto debería posicionar el origen en el centro de la línea roja y el escalado debería ocurrir alrededor de ese punto.

Comments are closed.