Виджет Wrap в Flutter

Виджет Row не переносит потомков: при нехватке ширины возникает переполнение. Виджет Wrap ведёт себя как ряд, но когда места не хватает, переносит хвост на новую «строчку» ниже. Удобно для облака тегов, фильтров и чипов.

Зазор между соседями в одной строке задаёт spacing. Расстояние между строками переноса задаёт runSpacing. Оба задаются в логических пикселях:

import 'package:flutter/material.dart';

void main() {
	runApp(const MaterialApp(home: HomePage()));
}

class HomePage extends StatelessWidget {
	const HomePage({super.key});

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: Padding(
				padding: const EdgeInsets.all(16),
				child: Wrap(
					spacing: 8,
					runSpacing: 8,
					children: const [
						Chip(label: Text('Dart')),
						Chip(label: Text('Flutter')),
						Chip(label: Text('Layout')),
						Chip(label: Text('Widgets')),
						Chip(label: Text('Material')),
					],
				),
			),
		);
	}
}

Направление переноса по умолчанию горизонтальное: строки идут сверху вниз. Выравнивание строк настраивают alignment и runAlignment аналогично главной и поперечной оси у Row, но для текущей и перенесённой линии:

Wrap(
	spacing: 12,
	runSpacing: 12,
	children: List.generate(
		8,
		(i) => Container(
			padding: const EdgeInsets.symmetric(
				horizontal: 12,
				vertical: 6,
			),
			color: Colors.teal.shade100,
			child: Text('Item $i'),
		),
	),
)

Соберите такой Wrap:

SizedBox(
	width: 200,
	child: Wrap(
		spacing: 10,
		runSpacing: 10,
		children: [
			for (var i = 1; i <= 8; i++) Text('Tag $i'),
		],
	),
)

Часть подписей уходит на вторую строку, жёлто-чёрной полосы нет.