Sobes.tech
Назад к вопросам
Junior — Middle
72

Можешь перечислить и описать типы виджетов, используемых в 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().

Разбор по шагам:

  1. ProfileCard получает name через конструктор.
  2. В build() возвращается дерево виджетов: Container -> Row -> Icon + SizedBox + Text.
  3. CounterButton разделён на сам виджет и объект состояния _CounterButtonState.
  4. В состоянии хранится count.
  5. При нажатии на кнопку вызывается setState(), Flutter понимает, что UI нужно перестроить.
  6. После перестроения текст кнопки показывает новое значение счётчика.

Ключевые моменты:

  • В Flutter почти всё — это виджет, включая отступы, выравнивание и даже сами экраны.
  • StatelessWidget подходит для неизменяемого UI, StatefulWidget — для UI с изменяемыми данными.
  • Многие виджеты можно условно отнести к layout, presentation, input и control.
  • Flutter строит интерфейс декларативно: описывается не “как менять экран”, а “как он должен выглядеть сейчас”.
  • Понимание дерева виджетов и setState() — база для работы с Flutter на junior/middle уровне.
  • Передача данных вниз по дереву чаще всего идёт через конструкторы, а для глубоких сценариев используют inherited-механизмы или state management.