Platz teilen mit flex

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 2 von 30.

Wenn zwei Kinder einer Row beide Expanded sind, teilen sie sich den Platz gleichmäßig: Auf einem 390 Pixel breiten Smartphone erhält jedes 195 Pixel.

Um den Platz ungleichmäßig aufzuteilen, gib Expanded einen flex:. Das ist ein Anteil, keine Größe. Flutter addiert die Anteile und teilt den Platz entsprechend auf:

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

Die Anteile ergeben zusammen 4, also erhält Rot drei Viertel der Zeile und Blau ein Viertel. Ein Kind ohne flex: hat einen Anteil von 1.

Da die Anteile Teile des Ganzen sind, behält das Layout bei jeder Bildschirmbreite seine Proportionen bei.

Aufgabe

Einfach

Mache die Chart-Box doppelt so breit wie die Notes-Box. Auf dem Smartphone sind das 260 und 130 Pixel.

Probier es selbst

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