Виджет Container в Flutter

Виджет Container - универсальная обёртка над одним потомком. Через width и height задают желаемые размеры, через padding - внутренние отступы (часто EdgeInsets). Параметр color заливает фон за потомком простым цветом.

Параметры color и decoration нельзя задавать одновременно: рамки, скругления и градиенты живут в BoxDecoration - его разберём позже. Пока достаточно однотонного Colors или Color(0xFF...):

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: Center(
				child: Container(
					width: 200,
					padding: const EdgeInsets.all(16),
					color: Colors.teal.shade100,
					child: const Text('Inside the container'),
				),
			),
		);
	}
}

Полоску фиксированной высоты собирают так:

Container(
	height: 56,
	alignment: Alignment.center,
	color: Colors.blueGrey,
	child: const Text(
		'Strip',
		style: TextStyle(color: Colors.white),
	),
)

По центру экрана выведите такой Container:

Container(
	width: 160,
	height: 80,
	padding: EdgeInsets.all(12),
	color: Colors.orange.shade200,
	child: Text('Block'),
)