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

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

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

StatelessWidget срещу 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. Keys позволяват на Flutter да съпоставя стари и нови Widget-и по време на възстановяване. Без Keys, Flutter съпоставя по тип на Widget и позиция. GlobalKey — достъп до State от друг Widget. Използва се за: сложни форми, анимации, достъп до State в тестове. IT Sectr препоръчва използването на Keys за списъци (List.generate) и избягване на GlobalKey, освен ако не е необходимо.

Expanded — Widget, който запълва наличното пространство в Row/Column/Flex. Flexible — не принуждава запълване (може да е по-малък). MediaQuery — InheritedWidget с информация за устройството: размер на екрана, ориентация, платформа, коефициент на мащабиране на текст. Theme/ThemeData — централизирана тема. Theme.of(context) — достъп. MaterialApp — коренов Widget за конфигурация на маршрутизиране, теми, локали. Scaffold — основно оформление с AppBar, Drawer, BottomNavigationBar. AppBar — горен панел.

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

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

Navigator 2.0

Navigator 2.0 — декларативна навигация. Router — централен Widget. RouteInformationParser — парсване на URL. RouterDelegate — управление на стека. GoRouter (пакет) — опростена обвивка над Navigator 2.0. Поддържа: именувани маршрути, параметри, пренасочване, deep linking. IT Sectr препоръчва GoRouter за повечето проекти и Navigator 2.0 само за сложни сценарии (уеб, десктоп).

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

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

Управление на състоянието

Provider — прост DI + управление на състоянието. ChangeNotifierProvider, MultiProvider. Riverpod — модерен заместител на Provider: безопасен по време на компилация, независим от BuildContext. Bloc — Event-Driven архитектура: Cubit (прости събития) срещу Bloc (сложни). GetX — леко управление на състоянието + DI + маршрутизиране. setState — най-простият, за локално състояние. IT Sectr препоръчва Riverpod за нови проекти и Provider за съществуващи.

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

MediaQuery — размер на екрана, ориентация, платформа, 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 само когато е необходимо.

Адаптивно оформление

LayoutBuilder — адаптиране към размерите на родителя. OrientationBuilder — адаптиране към ориентацията. Expanded срещу Flexible — разпределение на пространството в Row/Column. MediaQuery — точки на прекъсване за таблети и десктопи. SafeArea — полета от системни елементи (прорез, лента за състояние). AspectRatio — запазване на пропорциите. IT Sectr препоръчва LayoutBuilder за адаптивни оформления и OrientationBuilder за пейзажна ориентация.

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

Unit тестове — тестване на бизнес логика, хранилища, модели. dart test — стартиране. Widget тестове — тестване на widget-и изолирано. WidgetTester — pumpWidget, tap, enterText. Интеграционни тестове — пълни сценарии на реално устройство/емулатор. Mockito — мокване на зависимости. Golden тестове — сравнение на екранни снимки (golden файлове). 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 анимации — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Промените на свойствата се анимират автоматично. Explicit анимации — AnimationController с Tween. forward() / reverse(). Hero анимация — Hero Widget с етикет — анимация на преход между екрани. Staggered анимация — верига от анимации с 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')),
      ),
    );
  }
}

Мрежа (http, dio, graphql)

http — прост HTTP клиент (get, post, put, delete). dio — разширен клиент с интерцептори, таймаути, повторни опити, логване. 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 (дърво на widget-и), Timeline (производителност), Memory, Network, Logging. Profile mode — профилиране без дебъгване. Performance overlay — FPS, време за изграждане. Flame chart — проследяване с пламъчна диаграма. DevTools — основен инструмент за оптимизиране на Flutter приложения в продукция.

Flutter Web — компилиране на Flutter до WASM (WebAssembly). CanvasKit (Skia) срещу HTML renderer. CanvasKit — пиксел-перфектен, но по-тежък. HTML renderer — лек, но с ограничения. WASM (Flutter 3.22+) — нативна производителност. Адаптивно адаптиране чрез LayoutBuilder и MediaQuery. IT Sectr препоръчва CanvasKit за десктоп уеб приложения и HTML renderer за сайтове с съдържание.