Делим пространство с flex

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 2 из 30.

Когда два дочерних элемента Row — это Expanded, они делят пространство поровну: на телефоне шириной 390 пикселей каждому достаётся по 195 пикселей.

Чтобы разделить его не поровну, задайте для Expanded значение flex:. Это доля, а не размер. Flutter складывает доли и распределяет пространство пропорционально им:

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

В сумме доли равны 4, поэтому красному элементу достаются три четверти строки, а синему — одна четверть. Доля дочернего элемента без flex: равна 1.

Поскольку доли представляют собой части целого, пропорции макета сохраняются при любой ширине экрана.

Задание

Легко

Сделайте блок Chart вдвое шире блока Notes. На телефоне это 260 и 130 пикселей.

Попробуйте сами

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