Переполнение Row в Flutter

Виджет Row не сжимает потомков сильнее их минимального размера. Если суммарная ширина текстов, кнопок и отступов больше ширины экрана, ряд «вылезает» за границу. Flutter рисует предупреждение - жёлто-чёрную полосу с надписью об overflow - и в отладке видно, что места не хватило:

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: Row(
				children: const [
					SizedBox(width: 160, child: Text('Item one')),
					SizedBox(width: 160, child: Text('Item two')),
					SizedBox(width: 160, child: Text('Item three')),
				],
			),
		);
	}
}

Запустите пример на узком эмуляторе или сузьте окно - полоса появится справа у ряда. Это не сбой приложения, а сигнал раскладки: нужно уменьшить содержимое или перераспределить ширину.

Частые решения: обернуть гибкий текст в Expanded или Flexible, сократить подписи, уменьшить шрифт или перенести элементы в Wrap. Для длинной вертикальной формы вместо бесконечного Column внутри экрана используют прокрутку:

Row(
	children: const [
		Text('Brief'),
		Expanded(
			child: Text(
				'A long description wraps inside the row share',
			),
		),
	],
)

Соберите Row из трёх SizedBox шириной 200, в каждом короткий Text. На эмуляторе телефона появится полоса переполнения. Затем оставьте первый блок как есть, а два других замените одним Expanded с Text 'Remaining space' - полоса должна исчезнуть.