Что такое виджеты в Flutter?

Э, слушай, давай разберёмся с этими вашими виджетами во Flutter, а то народ путается, как будто в первый раз слышит. Представь, что ты строишь интерфейс из кубиков Лего, только цифровых. Вот эти кубики — и есть виджеты. Всё, что ты видишь на экране: текст, кнопка, картинка, даже пустое место — это ёпта виджет. Овердохуища их там, на любой вкус.

Главная фишка в том, что ты не лезешь вручную и не говоришь: «Эй, кнопка, измени цвет!». Ты просто описываешь, как вся эта сбруя должна выглядеть прямо сейчас. А движок Flutter, хитрая жопа, сам соображает, что поменялось с прошлого раза, и перерисовывает только нужные куски. Эффективно, чёрт возьми. Это называется декларативный подход — ты не командуешь, а заявляешь.

А собирается всё это добро через композицию. То есть ты берешь простые виджеты и вкладываешь их друг в друга, как матрёшку, пока не получится целый экран. Ебать копать, даже тема приложения или отступ — это тоже виджеты, просто невидимые.

Теперь, внимание, блядь, самое важное разделение. Виджеты бывают двух сортов, как люди: спокойные и нервные.

1. StatelessWidget — это как монах-отшельник. Создали его один раз, передали какие-то параметры (например, заголовок текста), и всё. У него внутри нет своего изменяемого состояния. Он посмотрел на переданные данные и отрисовался. Хоть сто раз его перестраивай — он будет одинаковым, пока ему не скормят новые параметры. Доверия ебать ноль к его самостоятельности, но зато надёжный.

2. StatefulWidget — вот это уже персонаж с характером. Он состоит из двух половинок. Первая — сам виджет, такой же иммутабельный кореш. А вторая — объект State, это его личный дневник и бардак в одной комнате. Там хранятся изменяемые данные (например, счётчик нажатий). Когда данные меняются, этот State кричит setState() — и Flutter понимает, что пора перерисовать эту часть интерфейса заново, с новыми данными. Без этого вызова — нихуя не изменится, хоть обосрись.

Смотри на примере, тут всё станет понятнее. Вот тебе Stateless — заголовок, который просто показывает то, что ему дали:

class MyHeader extends StatelessWidget {
  final String title; // Параметр, который ему передали. Final — менять низя.
  const MyHeader({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Text( // Возвращает виджет Text
      title, // с переданным заголовком
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

А вот его нервный братан Stateful — кнопка-счётчик:

class CounterButton extends StatefulWidget {
  const CounterButton({super.key});

  @override
  State<CounterButton> createState() => _CounterButtonState(); // Создаёт свой State
}

class _CounterButtonState extends State<CounterButton> {
  int _counter = 0; // Вот оно, состояние! Менять можно.

  void _increment() {
    setState(() { // КРИЧИМ движку: "Бля, состояние поменялось, перерисуй меня!"
      _counter++; // Меняем состояние
    });
  }

  @override
  Widget build(BuildContext context) {
    // Строим виджет на основе текущего состояния
    return ElevatedButton(
      onPressed: _increment, // При нажатии вызываем метод
      child: Text('Нажато $_counter раз'), // В текст вставляем текущий счётчик
    );
  }
}

И наконец, собираем всё это в кучу. Композиция, мать её:

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column( // Виджет-колонка
        children: [
          MyHeader(title: 'Демо приложение'), // Вложили Stateless
          const SizedBox(height: 20), // Виджет-пустота (отступ)
          CounterButton(), // Вложили Stateful
        ],
      ),
    );
  }
}

Вот и вся магия. Сначала терпения ноль ебать кажется, что много буков, но потом втягиваешься. Главное — понять эту разницу между Stateless и Stateful и что setState() — это волшебный пендель для перерисовки. Всё остальное — просто комбинирование этих кубиков. Пизда рулю, когда осознаёшь.