Можешь перечислить и описать типы виджетов, используемых в Flutter?
Ответ от нейросети
sobes.tech AI
Что хотят услышать интервьюеры:
В Flutter базовая единица UI — это виджет, и они бывают разных типов в зависимости от роли в дереве интерфейса. Обычно ожидают понимание двух главных категорий: StatelessWidget и StatefulWidget, а также того, что есть встроенные виджеты для компоновки, отображения, ввода и управления. Важно показать, что виджеты в Flutter можно рассматривать как описание интерфейса, а не как “живые” элементы в классическом смысле.
Определение:
В Flutter виджет — это неизменяемое описание части пользовательского интерфейса. Почти все в интерфейсе Flutter строится из виджетов, а дерево виджетов задаёт структуру экрана.
Основные типы виджетов обычно делят так:
- StatelessWidget — виджет без собственного изменяемого состояния. Используется, когда UI зависит только от входных данных.
- StatefulWidget — виджет с состоянием, которое может меняться во времени и вызывать перестроение интерфейса.
- InheritedWidget / InheritedModel — механизмы для передачи данных вниз по дереву без явной прокидки через конструкторы.
- Layout widgets — виджеты для расположения элементов:
Row,Column,Stack,Expanded,Padding. - Presentation widgets — отображают текст, иконки, изображения, контейнеры:
Text,Icon,Image,Container. - Input widgets — элементы ввода:
TextField,Checkbox,Switch,Radio,Slider. - Control widgets — управляют поведением и состоянием UI:
FutureBuilder,StreamBuilder,Navigator,GestureDetector.
На практике часто также говорят о leaf widgets — виджетах-листьях, которые уже не содержат других виджетов, а только отображают данные или принимают ввод.
Пример использования:
Допустим, нужно показать карточку профиля с именем и кнопкой обновления данных. Статическая часть интерфейса может быть StatelessWidget, а если загружаются данные и меняется состояние — удобнее StatefulWidget.
import 'package:flutter/material.dart';
class ProfileCard extends StatelessWidget {
final String name;
const ProfileCard({super.key, required this.name});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const Icon(Icons.person),
const SizedBox(width: 12),
Text(name),
],
),
);
}
}
class CounterButton extends StatefulWidget {
const CounterButton({super.key});
@override
State<CounterButton> createState() => _CounterButtonState();
}
class _CounterButtonState extends State<CounterButton> {
int count = 0;
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text('Нажато: $count'),
);
}
}
Пояснение кода:
В этом примере ProfileCard — это StatelessWidget, потому что он просто рисует UI на основе переданного имени и не хранит своё состояние.
CounterButton — это StatefulWidget, потому что счётчик count меняется после нажатия, и для обновления UI вызывается setState().
Разбор по шагам:
ProfileCardполучаетnameчерез конструктор.- В
build()возвращается дерево виджетов:Container -> Row -> Icon + SizedBox + Text. CounterButtonразделён на сам виджет и объект состояния_CounterButtonState.- В состоянии хранится
count. - При нажатии на кнопку вызывается
setState(), Flutter понимает, что UI нужно перестроить. - После перестроения текст кнопки показывает новое значение счётчика.
Ключевые моменты:
- В Flutter почти всё — это виджет, включая отступы, выравнивание и даже сами экраны.
StatelessWidgetподходит для неизменяемого UI,StatefulWidget— для UI с изменяемыми данными.- Многие виджеты можно условно отнести к layout, presentation, input и control.
- Flutter строит интерфейс декларативно: описывается не “как менять экран”, а “как он должен выглядеть сейчас”.
- Понимание дерева виджетов и
setState()— база для работы с Flutter на junior/middle уровне. - Передача данных вниз по дереву чаще всего идёт через конструкторы, а для глубоких сценариев используют inherited-механизмы или state management.