~/VibeHandbook

Приложения / Mobile

flutter.dev

Flutter

Что это

Flutter — это UI-инструментарий с открытым исходным кодом от Google для создания кросс-платформенных приложений из единой кодовой базы, написанной на языке Dart. В отличие от подходов, оборачивающих нативные виджеты, Flutter сам отрисовывает каждый пиксель собственным движком рендеринга, поэтому интерфейс выглядит и ведёт себя одинаково на iOS, Android, в вебе и на десктопе. Из коробки он поставляется с богатым набором виджетов Material и Cupertino.

Сильные стороны

  • Одна кодовая база на Dart нацелена на iOS, Android, веб и десктоп с согласованным результатом.
  • Собственный движок рендеринга означает идеально точный, одинаковый интерфейс везде.
  • Stateful Hot Reload делает итерации чрезвычайно быстрыми.
  • Большая, отполированная библиотека виджетов и мощный инструментарий.
  • Отлично подходит для кастомных, насыщенных брендингом и анимацией интерфейсов.

Компромиссы

  • Требует изучения Dart — языка, используемого почти исключительно для Flutter.
  • Бинарники приложений больше, потому что движок поставляется вместе с приложением.
  • Поскольку он отрисовывает собственные виджеты, обновления нативного облика и поведения платформы могут запаздывать.
  • Глубокие интеграции с платформой всё равно требуют нативного кода (Swift/Kotlin) через плагины.

Когда использовать

Обращайтесь к Flutter, когда хотите, чтобы одна команда выпустила очень отполированное, визуально согласованное приложение на множестве платформ — особенно когда кастомный дизайн и плавная анимация важнее точного соответствия нативным виджетам каждой ОС.

Соответствие vibe coding

Flutter хорошо сочетается с ИИ-ассистентами, потому что всё здесь — это виджет, скомпонованный в понятном дереве, а Hot Reload позволяет проверить сгенерированный интерфейс за секунды. Попросите модель разбить дерево на небольшие, сфокусированные виджеты, держать управление состоянием явным (например, единый класс состояния или известный пакет) и предпочитать const-конструкторы ради производительности. Поскольку фреймворк самодостаточен, сгенерированный код редко зависит от хрупкой нативной настройки.

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) => Column(children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('Add'),
        ),
      ]);
}