Flutter — кључни појмови, архитектура и виџети

Шта је Flutter

Flutter је SDK (Software Development Kit) и оквир за креирање корисничких интерфејса, најављен од Google-а 2015. године. Прва стабилна верзија Flutter 1.0 објављена је децембра 2018. За разлику од React Native-а, Flutter не користи мост између JavaScript-а и изворног кода — компајлира се директно у изворне инструкције процесора.

Кључна карактеристика Flutter-а је сопствени мотор за рендеровање. Оквир не зависи од UIKit-а (iOS) или Android View система. Уместо тога, Flutter црта сваки пиксел самостално путем Skia (до 2024) или новог Impeller мотора. Ово гарантује исти изглед апликације на свим платформама и елиминише проблеме прилагођавања различитим верзијама ОС-а.

Према подацима Statista 2024, Flutter заузима прво место међу вишеплатформским оквирима по популарности: око 46% програмера га користи за мобилни развој. Оквир се примењује у пројектима Google Pay, Alibaba, eBay, BMW и Tencent.

Историја и верзије Flutter-а

Прва алфа верзија Flutter-а представљена је на Dart Developer Summit-у 2015. под називом Sky. 2018. објављен је Flutter 1.0 са подршком само за iOS и Android. Flutter 2.0 (2021) додао је Web и Desktop. Flutter 3.0 (2022) увео је стабилну подршку за macOS и Linux. Flutter 3.16 (2023) представио је Impeller — нови мотор за рендеровање заснован на Metal и Vulkan-у.

Верзија Flutter 3.22 (2024) укључује Impeller подразумевано на iOS-у, побољшану подршку за Material Design 3, Dart 3.4 са макро проширењима и уграђену подршку за Native Assets за директан приступ ресурсима платформе. Google извештава да Impeller смањује испуштање оквира (jank) за 90% у поређењу са Skia-ом.

Језик Dart

Dart је програмски језик који је креирао Google 2011. и користи се у Flutter-у. Dart комбинује строгу типизацију са могућностима JIT компајлације (за Hot Reload) и AOT компајлације (за продукцијске верзије). Верзија Dart 3.0 (2023) увела је pattern matching, sealed class и records као стабилне функције.

Null safety у Dart-у — обавезна функција уведена од верзије 2.12. Компајлер проверава све nullable типове у фази изградње, елиминишући NullPointerException у runtime-у. Типови података (int, String, bool) су подразумевано non-nullable, а за nullable вредности користи се суфикс ? (нпр. String? name).

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

Архитектура Flutter-а изграђена је на трослојном принципу. Доњи слој — мотор (C/C++), задужен за рендеровање, улаз/излаз и приступ API-јима платформе. Средњи слој — оквир (Dart), који имплементира систем виџета, гестова, анимација и навигације. Горњи слој — апликација (Dart), која сакупља виџете у стабло.

Виџети и стабло виџета

У Flutter-у све је виџет. Виџети су два типа: StatelessWidget (непроменљив, не чува стање) и StatefulWidget (променљив, управља стањем путем State-а). Стабло виџета (Widget Tree) је хијерархијска структура у којој је сваки виџет дете угнежђен у родитеља. Scaffold, AppBar, Container, Text, Column, Row — основни градивни блокови.

BuildContext је објекат који преноси позицију виџета у стаблу. MediaQuery.of(context) добија димензије екрана, Theme.of(context) — тренутну тему. BuildContext се користи за навигацију (Navigator.of(context)), приступ InheritedWidget-у и превођење локале путем Localizations.of.

Impeller мотор

Impeller је модеран мотор за рендеровање Flutter-а, написан у C++ и користи Metal (iOS/macOS) и Vulkan (Android). За разлику од Skia-е, који је прецртавао сваки оквир из почетка, Impeller компајлира шејдере унапред и чува их у кешу. Ово елиминише кашњења при првом рендеровању сложених сцена и смањује оптерећење GPU-а.

Тестови Google Flutter Team-а показују да Impeller смањује време компајлације шејдера са 200–500 ms (Skia) на 1–3 ms. На iPhone 13 Pro, Impeller рендеровање достиже 120 FPS без испуштања оквира. На Android-у са Vulkan-ом стабилних 60 FPS чак и на уређајима средњег сегмента (Xiaomi Redmi Note 12).

Пример апликације у 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('Flutter апликација')),
        body: const Center(
          child: Text('Здраво, Flutter!'),
        ),
      ),
    );
  }
}

Предности Flutter-а

Јединствена база кода — главна предност Flutter-а. Један пројекат у Dart-у компајлира се за iOS, Android, Web, Windows, macOS и Linux. Према проценама Google-а, ово смањује време развоја за 30–50% у поређењу са одвојеним iOS и Android пројектима. Alibaba је смањила време објављивања верзија за 30% након преласка на Flutter.

Перформансе Flutter-а су блиске изворним. AOT компајлација Dart-а у машински код ARM и x86_64 елиминише кашњења интерпретације. Impeller мотор гарантује 60 FPS чак и на уређајима из 2018. (iPhone XR, Samsung Galaxy S9). Према Google-у, 99.5% оквира у Flutter апликацијама се рендерује без испуштања.

Hot Reload — технологија тренутног ажурирања кода. Програмер мења изворни код, чува датотеку, а Flutter поново изграђује стабло виџета за 300–800 ms без губитка тренутног стања апликације. Ово убрзава итерације UI дизајна: могуће је мењати маргине, боје и анимације за секунде без чекања на потпуну поновну изградњу.

Material Design 3 и сопствени језик дизајна Cupertino (iOS стил) укључени су у стандардни пакет Flutter-а. Material 3 виџети подржавају динамичке боје (Material You), прилагодљиви распоред и анимацију прелаза између екрана. CupertinoPageTransition и CupertinoNavigationBar опонашају понашање изворног iOS навигатора.

Прилагођавање виџета не захтева креирање прилагођених View-ова на свакој платформи. Довољно је преоптеретити build() и вратити нови виџет. Пакети animation (AnimatedContainer, Hero, TweenAnimationBuilder) и gesture (GestureDetector, Dismissible) покривају 95% сценарија UI анимације без писања кода платформе.

Екосистем и пакети Flutter-а

pub.dev — званични регистар пакета за Dart и Flutter. До јула 2024. у регистру је објављено преко 45 000 пакета. Инсталација пакета врши се командом flutter pub add <име_пакета>. Pub аутоматски решава зависности, проверава компатибилност верзија и генерише pubspec.lock.

Управљање стањем у Flutter-у — један од кључних архитектонских задатака. Поред flutter_bloc-а, популарна решења: Provider (препоручен од Google-а, користи InheritedWidget), Riverpod (прерађена верзија Provider-а са сигурношћу у компајлацији) и GetX (све-у-једном: стање, рутирање, DI). Provider остаје најједноставнији за почетак: ChangeNotifierProvider обавија модел, а Consumer прецртава виџет при промени података.

Тестирање у Flutter-у је подржано на три нивоа. Јединични тестови (flutter test) проверавају функције и класе без UI-ја. Виџет тестови (testWidgets) рендерују појединачне виџете у изолованом окружењу. Интеграциони тестови (IntegrationTest) покрећу комплетну апликацију на уређају или симулатору. Flutter 3.22 додао је подршку за патч тестове кроз патч аналитику и побољшани извештај о покривености кода.

Популарни пакети

dio — HTTP клијент са подршком за интерсепторе, тајмауте и FormData. Користи се у 40% Flutter пројеката на GitHub-у. Dio подржава пресретање захтева за евидентирање, понављање и додавање токена за ауторизацију. Друга најпопуларнија библиотека — retrofit, генерише типизиране API клијенте.

flutter_bloc — библиотека за управљање стањем заснована на BLoC (Business Logic Component) обрасцу. BlocProvider преноси стања низ стабло виџета, BlocBuilder прецртава UI при промени стања, а BlocListener извршава споредне ефекте (навигација, SnackBar). Cubet — поједностављена верзија BLoC-а без догађаја.

go_router — декларативна навигација за Flutter од Google-а. Руте се описују у GoRouter конфигурацији са подршком за угнежђене руте, преусмеравања и deep link-ове. ShellRoute дели навигацију на картице BottomNavigationBar-а. GoRouter 14.0 подржава type-safe путеве и StatefulShellRoute са очувањем стања картица.