СПРАВОЧНИК
Виджеты Flutter
Основные виджеты для UI мобильных приложений
В этом томе собраны основные виджеты Flutter — UI-фреймворка от Google, использующего язык Dart. Во Flutter всё является виджетом: от структурных контейнеров и элементов раскладки до кнопок, полей ввода и целых экранов. Виджеты комбинируются в дерево, описывающее интерфейс. Справочник сгруппирован по назначению и содержит рабочие примеры.
Ввод и кнопки 8
Checkbox
Checkbox({required bool? value, required ValueChanged<bool?>? onChanged})Флажок для булевого выбора.DropdownButton
DropdownButton<T>({required T? value, required List<DropdownMenuItem<T>> items, required ValueChanged<T?>? onChanged})Выпадающий список для выбора одного значения.ElevatedButton
ElevatedButton({required VoidCallback? onPressed, ButtonStyle? style, required Widget child})Приподнятая кнопка с заливкой и тенью.IconButton
IconButton({required Widget icon, required VoidCallback? onPressed, double iconSize, Color? color})Нажимаемая иконка-кнопка.Slider
Slider({required double value, required ValueChanged<double>? onChanged, double min, double max, int? divisions})Ползунок для выбора числа из диапазона.Switch
Switch({required bool value, required ValueChanged<bool>? onChanged})Переключатель-тумблер для булевых настроек.TextButton
TextButton({required VoidCallback? onPressed, ButtonStyle? style, required Widget child})Плоская кнопка без заливки и тени.TextField
TextField({TextEditingController? controller, InputDecoration? decoration, ValueChanged<String>? onChanged})Поле для ввода текста пользователем.Контейнеры-обёртки 5
Card
Card({Widget? child, double? elevation, ShapeBorder? shape, Color? color, EdgeInsets? margin})Карточка с тенью и скруглёнными углами.Divider
Divider({double? height, double? thickness, double? indent, Color? color})Горизонтальная разделительная линия.GestureDetector
GestureDetector({VoidCallback? onTap, VoidCallback? onDoubleTap, VoidCallback? onLongPress, required Widget child})Распознаёт жесты на любом виджете.InkWell
InkWell({VoidCallback? onTap, VoidCallback? onLongPress, BorderRadius? borderRadius, required Widget child})Нажимаемая область с эффектом волны (ripple).ListTile
ListTile({Widget? leading, Widget? title, Widget? subtitle, Widget? trailing, VoidCallback? onTap})Готовая строка списка с иконкой, текстом и действием.Прочее 3
FutureBuilder
FutureBuilder<T>({Future<T>? future, required Widget Function(BuildContext, AsyncSnapshot<T>) builder})Строит UI на основе результата Future (асинхронной операции).StreamBuilder
StreamBuilder<T>({Stream<T>? stream, required Widget Function(BuildContext, AsyncSnapshot<T>) builder})Строит UI на основе потока событий Stream.Theme
Theme.of(context) → ThemeData; Theme({required ThemeData data, required Widget child})Доступ к оформлению и его локальное переопределение.Раскладка 8
Column
Column({MainAxisAlignment mainAxisAlignment, CrossAxisAlignment crossAxisAlignment, List<Widget> children})Располагает дочерние виджеты в вертикальный столбец.GridView
GridView.count({int crossAxisCount, double spacing, List<Widget> children})Прокручиваемая сетка из виджетов.ListView
ListView({Axis scrollDirection, EdgeInsets padding, List<Widget> children})Прокручиваемый список виджетов.ListView.builder
ListView.builder({int? itemCount, required Widget Function(BuildContext, int) itemBuilder})Ленивый список: элементы создаются по мере прокрутки.Positioned
Positioned({double? top, double? right, double? bottom, double? left, double? width, double? height, required Widget child})Точно позиционирует ребёнка внутри Stack.Row
Row({MainAxisAlignment mainAxisAlignment, CrossAxisAlignment crossAxisAlignment, List<Widget> children})Располагает дочерние виджеты в горизонтальный ряд.Stack
Stack({AlignmentGeometry alignment, StackFit fit, List<Widget> children})Накладывает дочерние виджеты друг на друга слоями.Wrap
Wrap({Axis direction, double spacing, double runSpacing, List<Widget> children})Раскладывает виджеты в ряд с переносом на новую строку.Состояние и навигация 5
MaterialApp
MaterialApp({Widget? home, ThemeData? theme, Map<String, WidgetBuilder>? routes, String? title})Корневой виджет приложения Material Design.Navigator
Navigator.push(context, route); Navigator.pop(context, [result]);Управляет стеком экранов: переходы вперёд и назад.setState
void setState(VoidCallback fn)Обновляет состояние и перерисовывает виджет.StatefulWidget
abstract class StatefulWidget extends Widget { State createState(); }Виджет с изменяемым внутренним состоянием.StatelessWidget
abstract class StatelessWidget extends Widget { Widget build(BuildContext context); }Виджет без изменяемого состояния.Структура экрана 6
AppBar
AppBar({Widget? title, List<Widget>? actions, Widget? leading, double? elevation})Верхняя панель приложения с заголовком и действиями.BottomNavigationBar
BottomNavigationBar({required List<BottomNavigationBarItem> items, int currentIndex, ValueChanged<int>? onTap})Нижняя панель навигации между разделами.Drawer
Drawer({Widget? child, Color? backgroundColor, double? elevation})Выезжающее сбоку навигационное меню.FloatingActionButton
FloatingActionButton({required VoidCallback? onPressed, Widget? child, String? tooltip})Круглая плавающая кнопка основного действия.SafeArea
SafeArea({bool top, bool bottom, bool left, bool right, required Widget child})Отступает от вырезов и системных областей экрана.Scaffold
Scaffold({PreferredSizeWidget? appBar, Widget? body, Widget? drawer, Widget? floatingActionButton, Widget? bottomNavigationBar})Базовый каркас экрана Material Design.Структурные 8
Align
Align({AlignmentGeometry alignment = Alignment.center, double? widthFactor, double? heightFactor, Widget? child})Выравнивает дочерний виджет в заданной точке.Center
Center({double? widthFactor, double? heightFactor, Widget? child})Центрирует дочерний виджет внутри себя.Container
Container({padding, margin, color, width, height, decoration, alignment, child, ...})Универсальный контейнер: отступы, фон, рамка, размеры.Expanded
Expanded({int flex = 1, required Widget child})Растягивает ребёнка на свободное место в Row или Column.Flexible
Flexible({int flex = 1, FlexFit fit = FlexFit.loose, required Widget child})Гибко распределяет место, разрешая ребёнку быть меньше.Padding
Padding({required EdgeInsetsGeometry padding, Widget? child})Добавляет внутренние отступы вокруг дочернего виджета.SizedBox
SizedBox({double? width, double? height, Widget? child})Задаёт фиксированный размер или создаёт пустой промежуток.Spacer
Spacer({int flex = 1})Создаёт гибкий пустой промежуток в Row или Column.Текст и изображения 5
CircleAvatar
CircleAvatar({ImageProvider? backgroundImage, Color? backgroundColor, double? radius, Widget? child})Круглый аватар с картинкой или инициалами.Icon
Icon(IconData icon, {double? size, Color? color})Отображает иконку из набора Material Icons.Image
Image.network(String src, {double? width, double? height, BoxFit? fit})Отображает изображение из сети, ассетов или файла.RichText
RichText({required InlineSpan text, TextAlign textAlign, int? maxLines})Текст со смешанным оформлением через спаны.Text
Text(String data, {TextStyle? style, TextAlign? textAlign, int? maxLines, TextOverflow? overflow})Отображает строку текста с заданным стилем.