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.

¿Por qué la presencia de un SizedBox mueve a los elementos hermanos en un Stack?

Estoy luchando con la forma en que Flutter maneja la posición de los Widgets.

El contexto: mi objetivo es diseñar una escena animada con un vehículo en movimiento y una bomba de gasolina; dependiendo de la orientación del dispositivo, me gustaría escalar y posicionar el punto de vista del espectador (la ubicación de la bomba) en el centro de la pantalla, de la misma manera que lo hacía con la versión nativa de Swift en el iPhone de la siguiente manera:

Modo horizontal:
Modo horizontal

Modo vertical:
Modo vertical

Al intentar lograr esto con Flutter, me enfrento a varios problemas, uno de ellos es el hecho de que la presencia de un widget de depuración mueve a otros widgets del mismo Stack:

Está centrado con el SizedBox en el Stack…
Centrado con un blanc Sizebox

Pero ya no lo está sin él:
Ya no está centrado sin el SizedBox

Mi código es el siguiente y una versión mínima en Dart se puede encontrar aquí: https://dartpad.dev/?id=ccd214b1efacb61b158f6f0c2092e809

“`flutter

Widget buildScene(Size size, /* double scale,*/ bool debug) {
final hill = Hill(size: size);

final punmpOffsetX = size.width / 4;

// == Construye la escena
return Stack(clipBehavior: Clip.none, children: [
// == Materialización de toda la escena de depuración
if (debug)
SizedBox(
width: size.width,
height: size.height,
child: Container(
color: const Color(0x7ff67e22),
)),

// == Agrega el cielo
…widget.clouds,

// == Agrega el suelo
hill,

// == La bomba de gasolina
Transform.translate(
offset: Offset(punmpOffsetX /<em>- 115 / 2</em>/, 120),
child: Container(
width: 150,
child: ScaleTransition(
scale: Tween<double>(begin: 3, end: 1).animate(
CurvedAnimation(
parent: _controller, curve: Curves.elasticOut)),
child: Pump(offset: Offset.zero, width: 150)))),

// == El vehículo animado
DrivingVehicle(hill: hill),

“`

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Como experto en tecnología de la información especializado en Flutter y posicionamiento de widgets, entiendo los desafíos que enfrentas al intentar centrar y ajustar la vista del usuario según la orientación del dispositivo. Un problema con el que te estás encontrando es cómo la presencia de un widget de depuración en el Stack afecta el posicionamiento de otros widgets.

    Para superar este problema, puedes alternar la materialización de depuración de toda la escena utilizando un widget SizedBox con el mismo ancho y alto que la escena. Esto evitará mover otros widgets en el Stack.

    Además, puedes utilizar el widget Transform para realizar traducciones y rotaciones en tu escena. En tu caso específico, puedes utilizar el widget Transform.translate para desplazar la bomba de gas según la orientación del dispositivo.

    Espero que estos consejos te ayuden en tus desafíos con Flutter. ¡Buena suerte!

Comments are closed.