Что такое Flutter?

Что такое Flutter

Flutter — это open-source фреймворк от Google для создания кроссплатформенных приложений с одной кодовой базой. Это полная экосистема для разработки мобильных, веб и десктопных приложений.

История и философия

Flutter был представлен Google в 2015 году как ответ на проблему кроссплатформенной разработки. Основная идея: вместо обёрток над нативным кодом (как React Native), Flutter использует собственный rendering engine и встроенные виджеты, что обеспечивает лучшую производительность и контроль.

Архитектура Flutter

┌─────────────────────────────────┐
│      Dart Framework Layer       │
│  (Widgets, Material, Cupertino) │
└──────────────┬──────────────────┘
               │
┌──────────────▼──────────────────┐
│     Engine Layer (C++)          │
│  (Rendering, Skia, Text Layout) │
└──────────────┬──────────────────┘
               │
┌──────────────▼──────────────────┐
│   Platform Layer (Native)       │
│  (iOS, Android, Windows, etc.)  │
└─────────────────────────────────┘

Ключевые особенности

1. Один код — несколько платформ

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello Flutter')),
        body: const Center(
          child: Text('Works on iOS, Android, Web, Desktop'),
        ),
      ),
    );
  }
}

Этот код работает одинаково на всех платформах.

2. Hot Reload

Изменил код — видишь результат за 100мс. Это революция в опыте разработки:

flutter run
# Измени код, нажми R
# Результат мгновенно на экране

3. Собственный rendering engine

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

• Skia (от Google) — graphics library
• Material Design — для Android
• Cupertino — для iOS

Это означает, что UI выглядит одинаково на всех платформах (если ты захочешь).

4. Производительность

Flutter: 60-120 FPS
React Native: 30-60 FPS
Native: 60-120 FPS

Flutter достигает такой производительности благодаря собственному engine.

Основные компоненты

Widgets — всё в Flutter это widget:

// Статический виджет
class HelloWidget extends StatelessWidget {
  const HelloWidget();
  
  @override
  Widget build(BuildContext context) {
    return const Text('Hello');
  }
}

// Динамический виджет (со State)
class CounterWidget extends StatefulWidget {
  const CounterWidget();
  
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => count++),
      child: Text('Count: $count'),
    );
  }
}

BuildContext — информация о позиции в дереве виджетов:

@override
Widget build(BuildContext context) {
  // Получи информацию о экране
  final screenSize = MediaQuery.of(context).size;
  final theme = Theme.of(context);
  
  return Text('Width: ${screenSize.width}');
}

Платформы

Flutter поддерживает:

• iOS — полная поддержка
• Android — полная поддержка
• Web — в production (Dart → JavaScript)
• Windows — стабильно
• macOS — стабильно
• Linux — развивается

Flutter vs конкуренты

Flutter vs React Native:

• Flutter: собственный engine, лучше производительность
• React Native: использует нативные компоненты, большое сообщество

Flutter vs Kotlin Multiplatform (KMP):

• Flutter: один UI код для всех платформ
• KMP: разделённый UI, общий business logic

Flutter vs Native (Swift/Kotlin):

• Flutter: быстрая разработка, один код
• Native: максимальная производительность, лучше доступ к платформе

Экосистема

pub.dev — центральный репозиторий пакетов (как npm):

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.0.0
  dio: ^5.0.0

Популярные пакеты:

• http / dio — HTTP запросы
• provider — управление состоянием
• get_it — dependency injection
• hive / sqflite — локальное хранилище
• firebase — backend services
• freezed — code generation

Разработка приложения

Структура проекта:

my_app/
├── android/          # Нативный код Android
├── ios/              # Нативный код iOS
├── lib/              # Dart код
│   ├── main.dart
│   ├── screens/
│   ├── widgets/
│   └── models/
├── test/             # Unit тесты
├── pubspec.yaml      # Зависимости
└── analysis_options.yaml # Лиунтинг

Жизненный цикл приложения:

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }
  
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        print('App in foreground');
        break;
      case AppLifecycleState.paused:
        print('App in background');
        break;
      case AppLifecycleState.detached:
        print('App terminated');
        break;
      default:
        break;
    }
  }
  
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

Почему Flutter популярен

✅ Быстрая разработка — Hot Reload + Dart ✅ Кроссплатформенность — один код везде ✅ Производительность — 60-120 FPS ✅ Красивый UI — Material и Cupertino из коробки ✅ Большое сообщество — Google backing + активная экосистема ✅ Легко учить — Dart простой, хорошая документация ❌ Молодой — меньше пакетов, чем у React Native ❌ Размер APK — больше, чем нативное приложение

Лучшие практики

• Используй const конструкторы везде
• Разбивай UI на мелкие переиспользуемые виджеты
• Управляй состоянием правильно (Provider, BLoC, Riverpod)
• Тестируй (unit, widget, integration тесты)
• Следи за производительностью (DevTools, profiler)
• Используй анализ кода (analysis_options.yaml)

Flutter — это не просто фреймворк, это новый стандарт кроссплатформенной разработки, который позволяет создавать высокопроизводительные приложения без компромиссов в качестве.