Compartir espacio con flex

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 2 de 30.

Cuando dos hijos de un Row son ambos Expanded, comparten el espacio por igual: en un teléfono de 390 píxeles, 195 píxeles cada uno.

Para compartirlo de forma desigual, asigna un flex: a Expanded. Es una proporción, no un tamaño. Flutter suma las proporciones y divide el espacio según ellas:

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

Las proporciones suman 4, así que el rojo ocupa tres cuartas partes de la fila y el azul una cuarta parte. Un hijo sin flex: tiene una proporción de 1.

Como las proporciones son partes del total, el diseño mantiene sus proporciones con cualquier ancho de pantalla.

Desafío

Fácil

Haz que el cuadro Chart tenga el doble de ancho que el cuadro Notes. En el teléfono, eso equivale a 260 y 130 píxeles.

Pruébalo tú mismo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}