Виджет Expanded в Flutter

Когда Row растянут на всю ширину, потомки с собственным размером не заполняют оставшееся место сами. Виджет Expanded оборачивает потомка и забирает долю свободной ширины вдоль главной оси ряда (в Column - долю высоты).

Несколько Expanded подряд делят пространство по параметру flex. По умолчанию flex: 1 - доли равные. У одного потомка flex: 2, у другого flex: 1 - первый получит в два раза больше места:

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: [
					Expanded(
						flex: 1,
						child: Container(color: Colors.teal),
					),
					Expanded(
						flex: 2,
						child: Container(color: Colors.orange),
					),
				],
			),
		);
	}
}

Виджет Expanded можно ставить только внутри Flex-виджетов: Row, Column, Flexible не заменяет его напрямую в других контейнерах. Текст внутри Expanded получает ограниченную ширину и может переноситься, если строка длинная:

Row(
	children: const [
		Text('Label'),
		Expanded(
			child: Text('Value across the remaining width'),
		),
	],
)

В body соберите Row на всю ширину:

Row(
	children: [
		Text('Total'),
		Expanded(
			child: Text(
				'1,200',
				textAlign: TextAlign.end,
			),
		),
	],
)