Współdzielenie miejsca z flex

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 2 z 30.

Gdy dwoje dzieci elementu Row ma przypisane Expanded, dzielą się przestrzenią po równo: na telefonie o szerokości 390 pikseli każde otrzymuje 195 pikseli.

Aby podzielić przestrzeń nierówno, przypisz elementowi Expanded wartość flex:. To udział, a nie rozmiar. Flutter sumuje udziały i dzieli przestrzeń proporcjonalnie do nich:

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

Udziały sumują się do 4, więc czerwony element zajmuje 3/4 wiersza, a niebieski 1/4. Dziecko bez flex: ma udział równy 1.

Ponieważ udziały są częściami całości, układ zachowuje proporcje przy każdej szerokości ekranu.

Wyzwanie

Łatwy

Ustaw szerokość pola Chart na dwa razy większą niż pola Notes. Na telefonie oznacza to odpowiednio 260 i 130 pikseli.

Spróbuj swoich sił

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