Вёрстка: Row, Column, Padding, Expanded, SizedBox

Организуй несколько виджетов на экране с помощью колонок, строк, отступов и распределения пространства.

9 мин · 3 вопросов

Настоящий экран редко показывает один-единственный виджет: их нужно организовать. Это работа виджетов вёрстки. Column складывает своих детей вертикально, сверху вниз; Row выстраивает их горизонтально, слева направо. Поскольку они принимают несколько детей, параметр называется уже не child, а children, и он получает список: виджеты в квадратных скобках [ ], разделённые запятыми.

import 'package:flutter/material.dart';

Widget buildProfile() {
  return const Column(
    children: [
      Icon(Icons.person, size: 48),
      Text("Sonia Ben Ali"),
      Text("Flutter Developer"),
    ],
  );
}

Row работает точно так же, но горизонтально. Его главная ось - это ширина: параметр mainAxisAlignment выбирает, как распределить детей вдоль этой оси (center, чтобы собрать их посередине, spaceBetween, чтобы развести их как можно дальше друг от друга...). А чтобы просто вставить пустое место между двумя виджетами, используй SizedBox: невидимую коробку, которой ты задаёшь ширину (width) или высоту (height).

import 'package:flutter/material.dart';

Widget buildRating() {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.amber),
      SizedBox(width: 8),
      Text("4.8 out of 5"),
    ],
  );
}

Padding добавляет место вокруг своего ребёнка, чтобы содержимое не липло к краям. Величина отступа описывается через EdgeInsets: EdgeInsets.all(16) даёт 16 пикселей со всех четырёх сторон, EdgeInsets.only(left: 8) - только слева, а EdgeInsets.symmetric(horizontal: 12) - слева и справа одновременно.

import 'package:flutter/material.dart';

Widget buildQuote() {
  return const Padding(
    padding: EdgeInsets.all(16),
    child: Text("A text with some room around it"),
  );
}

Последний инструмент: Expanded. Помещённый среди детей Row или Column, он просит своего ребёнка занять всё оставшееся место. В примере ниже серая коробка сохраняет свои 80 пикселей ширины, а бирюзовая растягивается, заполняя остаток ширины, каким бы ни был размер экрана.

import 'package:flutter/material.dart';

Widget buildProgress() {
  return Row(
    children: [
      Container(width: 80, height: 40, color: Colors.grey),
      Expanded(
        child: Container(height: 40, color: Colors.teal),
      ),
    ],
  );
}

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. В каком направлении Column располагает своих детей?
   • Горизонтально, слева направо
   • Вертикально, сверху вниз
   • По кругу, вокруг центра экрана
2. Для чего нужен виджет Expanded?
   • Чтобы его ребёнок занял всё оставшееся место в Row или Column
   • Чтобы увеличить шрифт всех текстов на экране
   • Чтобы приближать изображение при касании
3. Как вставить пустое место в 8 пикселей между двумя виджетами в Row?
   • С помощью SizedBox(width: 8), поставленного между ними
   • Нажав восемь раз на пробел
   • С помощью Expanded(width: 8)