0

Tengo un Widget donde utilizo un Stack, pero no funciona de la misma forma en los diferentes dispositivos. En iPhone va bien, pero en una pantalla de Android no funciona. La idea es que se adapte a cualquier dispositivo y conserve todas las dimensiones que le asigno, dentro del Stack utilizo tres widgets, dos de ellos posiciono con medidas absolutas y estas son las que se adaptan, espero que sea clara mi pregunta.

introducir la descripción de la imagen aquí

@override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Stack(
      children: [
        Padding(
          padding: EdgeInsets.only(left: size.width * 0.04),
          child: SizedBox(
            width: size.width * 0.45,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: SvgPicture.asset(
                image,
                height: size.height * 0.17,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Positioned(
          top: size.height * 0.01,
          left: size.width * 0.38,
          child: Container(
            width: size.width * 0.09,
            height: size.height * 0.020,
            decoration: BoxDecoration(
              color: const Color(0xFFF7D330),
              borderRadius: BorderRadius.circular(4),
            ),
            child: TextButton(
              style: TextButton.styleFrom(
                minimumSize: Size.zero, // Set this
                padding: EdgeInsets.zero,
              ),
              onPressed: () {},
              child: const Text(
                'Leer',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 10,
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: size.height * 0.109,
          left: size.width * 0.040,
          child: Container(
            height: 35,
            width: size.width * 0.46,
            color: Colors.white,
            child: Padding(
              padding: EdgeInsets.only(left: size.width * 0.02),
              child: Column(
                children:[],
              ),
            ),
          ),
        )
      ],
    );
  }

1
  • los dispositivos tienen distintos aspect ratio, así que es difícil que quede igual para todos, quizás te conviene usar flex o expanded y jugar con el factor. También debes considerar el Safe Area. el 26 abr. 2022 a las 3:40

2 respuestas 2

1

Justo como mencionaron en el comentario Flex y Expanded pueden que sean tus mejores alternativas, de igual manera te dejo un link que me sirvió al momento de aprender las diferentes formas que existen Building Responsive Applications in Flutter

1
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia.
    – padaleiana
    el 27 abr. 2022 a las 17:40
0

Por lo que veo, tu problema es con el Banner amarillo de "Leer", podrías en vez de utilizar la propiedad "left" usar la propiedad "right". Esto te ocurre ya que lo que estas haciendo es alejar de más el widget desde el lado izquierdo y no posicionandolo desde la derecha (que es donde deseas).

Procura no abusar del uso de MediaQuery.of(context).size, ya que aunque puede verse bien en tu dispositivo, en otro que tenga mas ancho y largo, sera un resultado diferente. Utiliza widgets como AspectRatio, para mentener la relacion with/height de los widgets y LayoutBuilder para saber cual es el ancho maximo que puede ocupar un widget.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.