Dimensionar elementos al porcentaje del ancho/alto de la pantalla

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

Caja de tamaño fraccional

Si tiene un único widget, puede utilizarlo FractionallySizedBoxpara especificar un porcentaje del espacio disponible para llenar. Aquí el verde Containerestá configurado para llenar el 70% del ancho disponible y el 30% de la altura disponible.

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

Expandido

El Expandedwidget permite que un widget llene el espacio disponible, horizontalmente si está en una fila o verticalmente si está en una columna. Puede utilizar la flexpropiedad con varios widgets para darles pesos. Aquí el verde Containerocupa el 70% del ancho y el amarillo el Container30% del ancho.

Si desea hacerlo verticalmente, simplemente reemplácelo Rowcon 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 main.dartcódigo 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 ...
}

Dec 07 '2018 05:12 Suragch