Flutter u mobilnom razvoju: šta je to, ključni pojmovi i kako radi

Flutter: osnove Widget, StatelessWidget i StatefulWidget

Widget — deklarativni opis dela UI. Sve u Flutteru je Widget: od dugmeta do same aplikacije. Widget je konfiguracija (ne sam UI). StatelessWidget — nepromenljiv Widget. build() se poziva jednom. Nema stanje. Koristi se za statički sadržaj. StatefulWidget — promenljiv Widget. Ima State objekat koji se može menjati. setState() — pokreće rebuild. State — promenljiv objekat vezan za StatefulWidget. Sadrži podatke koji se mogu menjati.

StatelessWidget vs StatefulWidget

StatelessWidget — build() se poziva jednom. Pogodan za zaglavlja, ikone, statičke tekstove. StatefulWidget — build() se poziva svaki put kada se pozove setState(). Pogodan za forme, liste sa promenama, tajmere. InheritedWidget — prenos podataka nadole bez eksplicitnog prosleđivanja kroz konstruktore. Theme, MediaQuery, Navigator — InheritedWidget-ovi. BuildContext — pozicija Widget-a u stablu. context.of<T>, context.watch<T>, context.select<T,R> — pristup InheritedWidget-u.

// Primer Flutter Widget: StatefulWidget sa 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 — konfiguracija. StatelessWidget — nepromenljiv. StatefulWidget — promenljiv sa setState(). IT Sectr preporučuje početak sa StatelessWidget i prelazak na StatefulWidget samo kada je potrebno stanje.

Stabla (Widget Tree, Element Tree, RenderObject Tree)

Flutter koristi tri stabla za efikasno renderovanje. Widget Tree — stablo konfiguracije. Widget-i se često kreiraju (svaki build), lagani su. Element Tree — stablo elemenata. Jedan element po Widget-u (ako se tip ne menja). Element — most između Widget-a i RenderObject-a. RenderObject Tree — stablo renderovanja. Upravlja veličinama, pozicijama, crtanjem. RenderObject — težak, retko se kreira. Flutter upoređuje Widget Tree i ažurira Element Tree, što pokreće ažuriranje RenderObject Tree.

Keys i Element Tree

Key — identifikator Widget-a u Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key-evi omogućavaju Flutter-u da upari stare i nove Widget-e tokom rebuild-a. Bez Key-eva, Flutter uparuje po tipu Widget-a i poziciji. GlobalKey — pristup State iz drugog Widget-a. Koristi se za: složene forme, animacije, pristup State u testovima. IT Sectr preporučuje korišćenje Key-eva za liste (List.generate) i izbegavanje GlobalKey osim ako je neophodno.

Expanded — Widget koji popunjava dostupni prostor u Row/Column/Flex. Flexible — ne primorava na popunjavanje (može biti manji). MediaQuery — InheritedWidget sa informacijama o uređaju: veličina ekrana, orijentacija, platforma, faktor skale teksta. Theme/ThemeData — centralizovana tema. Theme.of(context) — pristup. MaterialApp — root Widget za konfiguraciju rutiranja, tema, lokalizacija. Scaffold — osnovni raspored sa AppBar, Drawer, BottomNavigationBar. AppBar — gornji panel.

Navigacija (Navigator, Route)

Navigator — stek ruta (Routes). Navigator.push — otvori ekran (vraća Future). Navigator.pop — zatvori (sa rezultatom). MaterialPageRoute — animirani prelaz (klizanje sa desne strane). Named Routes — string identifikatori. onGenerateRoute — centralizovani handler. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — deklarativna navigacija za web, deep linking i složene scenarije.

Navigator 2.0

Navigator 2.0 — deklarativna navigacija. Router — centralni Widget. RouteInformationParser — parsiranje URL-a. RouterDelegate — upravljanje stekom. GoRouter (paket) — pojednostavljeni omotač nad Navigator 2.0. Podržava: imenovane rute, parametre, preusmeravanje, deep linking. IT Sectr preporučuje GoRouter za većinu projekata i Navigator 2.0 samo za složene scenarije (web, desktop).

Asinhronost (FutureBuilder, StreamBuilder)

FutureBuilder — Widget koji gradi UI na osnovu Future. connectionState: none, waiting, active, done. Koristi se za: HTTP zahteve, čitanje baze podataka, tajmere. StreamBuilder — Widget za Stream (beskonačni tok podataka). snapshot.data, snapshot.hasError, snapshot.hasData. Koristi se za: WebSocket, Firebase, ažuriranja lokacije. Oba Widget-a se ponovo grade po prijemu novih podataka.

Upravljanje stanjem

Provider — jednostavan DI + upravljanje stanjem. ChangeNotifierProvider, MultiProvider. Riverpod — moderna zamena za Provider: bezbedan na kompilaciji, nezavisan od BuildContext. Bloc — Event-Driven arhitektura: Cubit (jednostavni događaji) vs Bloc (složeni). GetX — lagano upravljanje stanjem + DI + rutiranje. setState — najjednostavnije, za lokalno stanje. IT Sectr preporučuje Riverpod za nove projekte i Provider za postojeće.

Teme i adaptacija (MediaQuery, ThemeData)

MediaQuery — veličina ekrana, orijentacija, platforma, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — tema aplikacije: boje, fontovi, oblici. Theme.of(context).textTheme.bodyLarge. Hot Reload — injekcija koda u aplikaciju koja radi. Čuva stanje. Ne podržava: menjanje main(), globalne promenljive, statička polja. Hot Restart — potpuno ponovno pokretanje aplikacije (gubitak stanja). Hot Reload — glavna prednost Flutter-a za programere.

StatelessWidget — za statički sadržaj. StatefulWidget — za dinamički sadržaj. InheritedWidget — za DI. IT Sectr preporučuje StatelessWidget podrazumevano i StatefulWidget samo kada je potrebno.

Responsive raspored

LayoutBuilder — prilagođavanje dimenzijama roditelja. OrientationBuilder — prilagođavanje orijentaciji. Expanded vs Flexible — distribucija prostora u Row/Column. MediaQuery — tačke prekida za tablete i desktop uređaje. SafeArea — margine od sistemskih elemenata (notch, status bar). AspectRatio — održavanje proporcija. IT Sectr preporučuje LayoutBuilder za adaptivne rasporede i OrientationBuilder za pejzažnu orijentaciju.

Testiranje (Widget, Integration, Unit)

Unit testovi — testiranje poslovne logike, repozitorijuma, modela. dart test — pokretanje. Widget testovi — testiranje widget-a izolovano. WidgetTester — pumpWidget, tap, enterText. Integracioni testovi — potpuni scenariji na stvarnom uređaju/emulatoru. Mockito — mockovanje zavisnosti. Golden testovi — poređenje snimaka ekrana (golden fajlovi). IT Sectr preporučuje Widget testove za svaki ekran i Unit testove za poslovnu logiku.

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);
  });
}

Animacije (Implicitne, Eksplicitne, Hero)

Implicitne animacije — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Promene svojstava se automatski animiraju. Eksplicitne animacije — AnimationController sa Tween. forward() / reverse(). Hero animacija — Hero Widget sa tagom — animacija prelaza između ekrana. Postepena animacija — lanac animacija sa Interval. Lottie — integracija After Effects animacija. Rive — interaktivne animacije (state machine). IT Sectr preporučuje AnimatedContainer za 80% slučajeva i AnimationController za složene scenarije.

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')),
      ),
    );
  }
}

Umrežavanje (http, dio, graphql)

http — jednostavan HTTP klijent (get, post, put, delete). dio — napredni klijent sa interceptorima, timeout-ima, ponovnim pokušajima, logovanjem. graphql_flutter — GraphQL klijent za Flutter. json_serializable — generisanje fromJson/toJson putem anotacija. Retrofit Dart — type-safe HTTP klijent kao Retrofit. WebSocket — putem web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr preporučuje dio za REST API i graphql_flutter za GraphQL.

Flutter DevTools — skup alata: Inspector (stablo widget-a), Timeline (performanse), Memory, Network, Logging. Profile mode — profilisanje bez debug-a. Performance overlay — FPS, vreme izgradnje. Flame chart — grafik plamena. DevTools — neophodan alat za optimizaciju Flutter aplikacija u produkciji.

Flutter Web — kompilacija Flutter-a u WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, ali teži. HTML renderer — lagan, ali sa ograničenjima. WASM (Flutter 3.22+) — native performanse. Responsive adaptacija putem LayoutBuilder i MediaQuery. IT Sectr preporučuje CanvasKit za desktop web aplikacije i HTML renderer za sajtove sa sadržajem.