Пойми главную идею Flutter, дерево виджетов, на трёх базовых кирпичиках: Text, Container и Icon.
Открыть этот урок в KodokonВо Flutter всё является виджетом. Виджет - это кирпичик интерфейса: описание кусочка того, что появляется на экране. Текст - виджет, иконка - виджет, отступ - виджет... и весь экран тоже! Чтобы построить интерфейс, ты вкладываешь виджеты друг в друга, как матрёшки. Вместе они образуют дерево виджетов: у каждого виджета есть родитель (тот, что его содержит) и иногда дети (те, кого содержит он). Вернёмся к нашей минимальной программе и посмотрим на её дерево.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text(
"Everything is a widget!",
style: TextStyle(fontSize: 24),
),
),
),
);
}
}Сверху вниз: MaterialApp настраивает всё приложение (тема, навигация) по правилам Material 3, визуального языка Google. Scaffold (буквально "строительные леса") задаёт структуру экрана: фон, необязательную панель заголовка... Center центрирует своего ребёнка, а Text показывает текст. Параметр style у Text принимает TextStyle, который задаёт размер (fontSize), цвет или насыщенность символов. Теперь познакомимся с Container - универсальной коробкой: прямоугольником, у которого ты управляешь размером, цветом и содержимым.
import 'package:flutter/material.dart';
Widget buildYellowBox() {
return Container(
width: 200,
height: 100,
color: Colors.amber,
child: const Center(
child: Text("I'm inside a box"),
),
);
}Функция buildYellowBox возвращает виджет: разбивать интерфейс вот так на маленькие именованные кусочки - очень распространённая практика. Этот Container шириной 200 пикселей и высотой 100, красится в янтарно-жёлтый благодаря каталогу цветов Colors и держит центрированный текст. Третий базовый кирпичик: Icon, который показывает пиктограмму. Flutter поставляется с сотнями готовых иконок в каталоге Icons: звезда, сердце, домик...
import 'package:flutter/material.dart';
Widget buildStar() {
return const Icon(
Icons.star,
size: 48,
color: Colors.orange,
);
}Запомни логику дерева: когда виджет принимает одного ребёнка, параметр называется child (так устроены Center и Container). В нашем первом примере Scaffold - родитель Center, который, в свою очередь, родитель Text. Flutter рисует экран, обходя это дерево сверху вниз. Если ты умеешь сказать, кто чей родитель, ты сможешь прочитать любой интерфейс Flutter.
Center(child: Text("Hi")) какой виджет является родителем?