Точки перехода в LayoutBuilder

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

На планшете приложение для почты показывает меню рядом с сообщениями. На телефоне для этого нет места, поэтому меню располагается сверху. Ширина, при которой макет меняется, называется точкой останова.

LayoutBuilder сообщает, сколько места есть у виджета, и позволяет создавать разные варианты для каждого размера:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // телефон
    }
    return Row(children: [menu, content]); // планшет
  },
)

builder — это функция, которую Flutter вызывает, передавая ей доступное пространство в constraints. constraints.maxWidth — это максимальная ширина результата. Если она меньше 600 пикселей, возвращается Column; в противном случае — Row. На телефоне шириной 390 пикселей вы увидите столбец, а на планшете шириной 1000 пикселей — строку.

MediaQuery считывает параметры всего экрана. LayoutBuilder считывает доступное пространство для одного виджета, поэтому он продолжает работать, даже если этот виджет — панель внутри страницы большего размера.

Задание

Средне

Меню и содержимое всегда расположены рядом, из-за чего на телефоне тесно. Используй LayoutBuilder с точкой перехода на ширине 600 пикселей:

уже 600: меню над содержимым, в Column
600 и шире: рядом, в Row, как сейчас

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

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('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}