Flutter в мобильной разработке: что это, ключевые понятия и как работает

Flutter: основы Widget, StatelessWidget и StatefulWidget

Widget — декларативное описание части UI. Всё в Flutter — Widget: от кнопки до приложения. Widget — это конфигурация (не сам UI). StatelessWidget — неизменяемый Widget. build() вызывается один раз. Не имеет состояния. Используется для статического контента. StatefulWidget — изменяемый Widget. Имеет объект State, который может меняться. setState() — триггер rebuild. State — mutable объект, привязанный к StatefulWidget. Содержит данные, которые могут меняться.

StatelessWidget vs StatefulWidget

StatelessWidget — build() вызывается один раз. Подходит для заголовков, иконок, статических текстов. StatefulWidget — build() вызывается каждый раз при setState(). Подходит для форм, списков с изменениями, таймеров. InheritedWidget — передача данных вниз по дереву без явной передачи через конструкторы. Theme, MediaQuery, Navigator — InheritedWidget. BuildContext — позиция Widget в дереве. context.of<T>, context.watch<T>, context.select<T,R> — доступ к InheritedWidget.

// Пример Flutter Widget: StatefulWidget с setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — конфигурация. StatelessWidget — неизменяемый. StatefulWidget — изменяемый с setState(). IT Sectr рекомендует начинать с StatelessWidget и переходить на StatefulWidget только когда нужно состояние.

Деревья (Widget Tree, Element Tree, RenderObject Tree)

Flutter использует три дерева для эффективного рендеринга. Widget Tree — дерево конфигураций. Widget'ы создаются часто (каждый build), лёгкие. Element Tree — дерево элементов. Один элемент на каждый Widget (если тип не меняется). Element — мост между Widget и RenderObject. RenderObject Tree — дерево рендеринга. Отвечает за размеры, позиции, рисование. RenderObject — тяжёлый, создаётся редко. Flutter сравнивает Widget Tree и обновляет Element Tree, что вызывает обновление RenderObject Tree.

Keys и Element Tree

Key — идентификатор Widget в Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key позволяет Flutter сопоставлять старые и новые Widget при rebuild. Без Key Flutter сопоставляет по типу Widget и позиции. GlobalKey — доступ к State из другого Widget. Используется для: сложных форм, анимаций, доступа к State в тестах. IT Sectr рекомендует использовать Key для списков (List.generate) и избегать GlobalKey без необходимости.

Expanded — Widget, заполняющий доступное пространство в Row/Column/Flex. Flexible — не принуждает к заполнению (может быть меньше). MediaQuery — InheritedWidget с информацией об устройстве: размер экрана, orientation, platform, text scale factor. Theme/ThemeData — централизованная тема. Theme.of(context) — доступ. MaterialApp — корневой Widget с настройкой маршрутизации, тем, локалей. Scaffold — базовый layout с AppBar, Drawer, BottomNavigationBar. AppBar — верхняя панель.

Навигация (Navigator, Route)

Navigator — стек маршрутов (Routes). Navigator.push — открыть экран (возвращает Future). Navigator.pop — закрыть (с результатом). MaterialPageRoute — анимированный переход (slide from right). Named Routes — строковые идентификаторы. onGenerateRoute — централизованный обработчик. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — декларативная навигация для web, deep linking и сложных сценариев.

Navigator 2.0

Navigator 2.0 — декларативная навигация. Router — центральный Widget. RouteInformationParser — парсинг URL. RouterDelegate — управление стеком. GoRouter (пакет) — упрощённая обёртка над Navigator 2.0. Поддерживает: именованные маршруты, параметры, redirect, deep linking. IT Sectr рекомендует GoRouter для большинства проектов и Navigator 2.0 только для сложных сценариев (web, desktop).

Асинхронность (FutureBuilder, StreamBuilder)

FutureBuilder — Widget, строящий UI на основе Future. connectionState: none, waiting, active, done. Используется для: HTTP-запросов, чтения БД, таймеров. StreamBuilder — Widget для Stream (бесконечный поток данных). snapshot.data, snapshot.hasError, snapshot.hasData. Используется для: WebSocket, Firebase, location updates. Оба Widget перестраиваются при получении новых данных.

State Management

Provider — простой DI + state management. ChangeNotifierProvider, MultiProvider. Riverpod — современная замена Provider: compile-safe, не зависит от BuildContext. Bloc — Event-Driven архитектура: Cubit (простые события) vs Bloc (сложные). GetX — лёгкий state management + DI + routing. setState — простейший, для локального состояния. IT Sectr рекомендует Riverpod для новых проектов и Provider для существующих.

Темы и адаптация (MediaQuery, ThemeData)

MediaQuery — размер экрана, orientation, platform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — тема приложения: цвета, шрифты, формы. Theme.of(context).textTheme.bodyLarge. Hot Reload — инъекция кода в работающее приложение. Сохраняет состояние. Не поддерживает: изменение main(), глобальные переменные, статические поля. Hot Restart — полный перезапуск приложения (потеря состояния). Hot Reload — главное преимущество Flutter для разработчика.

StatelessWidget — для статики. StatefulWidget — для динамики. InheritedWidget — для DI. IT Sectr рекомендует StatelessWidget по умолчанию и StatefulWidget только при необходимости.

Responsive Layout

LayoutBuilder — адаптация под размеры родителя. OrientationBuilder — адаптация под ориентацию. Expanded vs Flexible — распределение пространства в Row/Column. MediaQuery — breakpoints для планшетов и десктопов. SafeArea — отступы от системных элементов (notch, status bar). AspectRatio — сохранение пропорций. IT Sectr рекомендует LayoutBuilder для адаптивных макетов и OrientationBuilder для альбомной ориентации.

Тестирование (Widget, Integration, Unit)

Unit тесты — тестирование бизнес-логики, репозиториев, моделей. dart test — запуск. Widget тесты — тестирование виджетов в изоляции. WidgetTester — pumpWidget, tap, enterText. Integration тесты — полные сценарии на реальном устройстве/эмуляторе. Mockito — мокирование зависимостей. Golden tests — сравнение скриншотов (якоря). IT Sectr рекомендует Widget тесты для каждого экрана и Unit тесты для бизнес-логики.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Анимации (Implicit, Explicit, Hero)

Implicit animations — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Изменение свойств автоматически анимируется. Explicit animations — AnimationController с Tween. forward() / reverse(). Hero animation — Hero Widget с тегом — анимация перехода между экранами. Staggered animation — цепочка анимаций с Interval. Lottie — интеграция After Effects анимаций. Rive — интерактивные анимации (state machine). IT Sectr рекомендует AnimatedContainer для 80% случаев и AnimationController для сложных сценариев.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Networking (http, dio, graphql)

http — простой HTTP-клиент (get, post, put, delete). dio — продвинутый клиент с интерцепторами, таймаутами, retry, логированием. graphql_flutter — GraphQL клиент для Flutter. json_serializable — генерация fromJson/toJson через аннотации. Retrofit Dart — type-safe HTTP клиент как Retrofit. WebSocket — через web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr рекомендует dio для REST API и graphql_flutter для GraphQL.

Flutter DevTools — набор инструментов: Inspector (дерево виджетов), Timeline (производительность), Memory, Network, Logging. Profile mode — профилирование без debug. Performance overlay — FPS, build times. Flame chart — flame chart трейсинга. DevTools — обязательный инструмент для оптимизации Flutter-приложений в production.

Flutter Web — компиляция Flutter в WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, но тяжелее. HTML renderer — лёгкий, но с ограничениями. WASM (Flutter 3.22+) — нативная производительность. Responsive адаптация через LayoutBuilder и MediaQuery. IT Sectr рекомендует CanvasKit для десктопных веб-приложений и HTML renderer для контентных сайтов.