Compartilhando espaço com flex

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 2 de 30.

Quando dois filhos de uma Row são ambos Expanded, eles dividem o espaço igualmente: em um celular de 390 pixels, 195 pixels para cada um.

Para dividi-lo de forma desigual, atribua um flex: a Expanded. Ele representa uma proporção, não um tamanho. O Flutter soma as proporções e divide o espaço de acordo com elas:

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

As proporções somam 4, então o vermelho recebe três quartos da linha e o azul recebe um quarto. Um filho sem flex: tem uma proporção de 1.

Como as proporções são partes do todo, o layout mantém suas proporções em qualquer largura de tela.

Desafio

Fácil

Faça a caixa Chart duas vezes mais larga que a caixa Notes. No celular, isso corresponde a 260 e 130 pixels.

Experimente você mesmo

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')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}