Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

433
Vistas
Dimensionamiento de elementos al porcentaje del ancho/alto de la pantalla

¿Existe una forma simple (que no sea LayoutBuilder) de dimensionar un elemento en relación con el tamaño de la pantalla (ancho/alto)? Por ejemplo: ¿cómo configuro el ancho de CardView para que sea el 65% del ancho de la pantalla?

No se puede hacer dentro del método de build (obviamente), por lo que tendría que posponerse hasta la compilación posterior. ¿Hay un lugar preferido para poner lógica como esta?

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Esta es una respuesta complementaria que muestra la implementación de un par de las soluciones mencionadas.

Caja de tamaño fraccionado

Si tiene un solo widget, puede usar un widget FractionallySizedBox para especificar un porcentaje del espacio disponible para llenar. Aquí, el Container verde está configurado para llenar el 70 % del ancho disponible y el 30 % del alto disponible.

Caja de tamaño fraccional
 Widget myWidget() { return FractionallySizedBox( widthFactor: 0.7, heightFactor: 0.3, child: Container( color: Colors.green, ), ); }

Expandido

El widget Expanded permite que un widget llene el espacio disponible, horizontalmente si está en una fila o verticalmente si está en una columna. Puede usar la propiedad flex con múltiples widgets para darles peso. Aquí el Container verde ocupa el 70% del ancho y el Container amarillo ocupa el 30% del ancho.

Expandido

Si desea hacerlo verticalmente, simplemente reemplace Row con Column .

 Widget myWidget() { return Row( children: <Widget>[ Expanded( flex: 7, child: Container( color: Colors.green, ), ), Expanded( flex: 3, child: Container( color: Colors.yellow, ), ), ], ); }

código suplementario

Aquí está el código main.dart para su referencia.

 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("FractionallySizedBox"), ), body: myWidget(), ), ); } } // replace with example code above Widget myWidget() { return ... }
about 4 years ago · Santiago Trujillo Denunciar

0

FractionallySizedBox también puede ser útil. También puede leer el ancho de la pantalla directamente desde MediaQuery.of(context).size y crear un cuadro de tamaño basado en eso

 MediaQuery.of(context).size.width * 0.65

si realmente desea dimensionar como una fracción de la pantalla, independientemente de cuál sea el diseño.

about 4 years ago · Santiago Trujillo Denunciar

0

Esto podría ser un poco más claro:

 double width = MediaQuery.of(context).size.width; double yourWidth = width * 0.65;

Espero que esto haya resuelto tu problema.

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda