Condividere lo spazio con flex

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 2 di 30.

Quando due figli di una Row sono entrambi Expanded, si dividono lo spazio equamente: su un telefono largo 390 pixel, 195 pixel ciascuno.

Per dividerlo in modo disuguale, assegna a Expanded un flex:. È una quota, non una dimensione. Flutter somma le quote e divide lo spazio in base a esse:

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

Le quote sommano a 4, quindi il rosso ottiene tre quarti della riga e il blu un quarto. Un figlio senza flex: ha una quota pari a 1.

Poiché le quote sono parti del totale, il layout mantiene le sue proporzioni su schermi di qualsiasi larghezza.

Sfida

Facile

Rendi il riquadro Chart largo il doppio del riquadro Notes. Sul telefono, le larghezze sono rispettivamente di 260 e 130 pixel.

Provalo tu

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