Что такое Flutter и как он работает

Коротко о Flutter

Flutter — открытый фреймворк от Google для создания приложений с одной кодовой базой. Основная сфера — мобильные приложения для iOS и Android, но тот же код можно собрать для веба и десктопа (Windows, macOS, Linux).

Ключевые идеи Flutter:

• язык Dart;
• интерфейс из виджетов, собранных в дерево;
• собственный движок отрисовки вместо системных компонентов;
• hot reload — изменения в коде видны в работающем приложении почти мгновенно.

Язык Dart

Dart — язык от Google со строгой типизацией и знакомым синтаксисом: разработчикам на Java, Kotlin, C# или TypeScript он покажется понятным за несколько дней.

Важная особенность — два режима компиляции:

• во время разработки код выполняется так, чтобы изменения можно было подгружать на лету;
• в релизной сборке код компилируется заранее (AOT) в машинный код устройства, поэтому приложение запускается и работает быстро.

В Dart встроена null safety: компилятор не дает случайно обратиться к пустому значению, что убирает целый класс ошибок.

Дерево виджетов

Во Flutter все — виджет: текст, кнопка, отступ, экран и само приложение. Виджеты вкладываются друг в друга и образуют дерево. Вот минимальное приложение:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello')),
        body: const Center(child: Text('Flutter')),
      ),
    );
  }
}

Интерфейс описывается декларативно: вы говорите, как экран должен выглядеть при текущих данных, а Flutter сам решает, что перерисовать при их изменении. Есть два базовых типа:

• StatelessWidget — без собственного состояния (заголовок, иконка);
• StatefulWidget — с состоянием, которое меняется (счетчик, форма, список с загрузкой).

Для крупных приложений состояние обычно выносят в отдельный слой с помощью библиотек управления состоянием.

Собственный движок отрисовки

Большинство фреймворков используют системные кнопки и списки. Flutter поступает иначе: он рисует каждый пиксель сам через собственный графический движок.

Что это дает:

• одинаковый вид на iOS и Android, без сюрпризов от разных версий ОС;
• полный контроль над дизайном и анимациями;
• плавную отрисовку сложных интерфейсов.

Цена — если нужен «системный» вид, его тоже нужно воспроизвести. Для этого во Flutter есть готовые наборы виджетов: Material (стиль Google) и Cupertino (стиль iOS).

Hot reload

Разработчик меняет код, сохраняет файл — и через секунду видит результат в запущенном приложении, не теряя текущего состояния: открытый экран, введенные данные остаются на месте. Это сильно ускоряет работу над интерфейсом и правки по замечаниям дизайнера.

Для изменений, которые затрагивают инициализацию приложения, используется hot restart — быстрый перезапуск со сбросом состояния.

Какие приложения подходят для Flutter

• Бизнес-приложения: интернет-магазины, доставка, бронирование, личные кабинеты.
• Приложения с ярким фирменным дизайном и богатыми анимациями.
• MVP, которые нужно быстро выпустить сразу на iOS и Android.
• Внутренние корпоративные приложения для сотрудников.

Ограничения

• Размер приложения. Движок входит в сборку, поэтому минимальное приложение весит больше нативного аналога.
• Новые функции ОС появляются с задержкой: их нужно дождаться в плагинах или подключить самостоятельно через нативный код (platform channels).
• Специфичное железо и редкие SDK могут потребовать нативного модуля на Swift или Kotlin.
• Веб-версия подходит для приложений, но не для контентных сайтов, где важны SEO и быстрая первая загрузка.
• Dart почти не используется вне Flutter, поэтому кадры нужно искать именно под этот стек.