Flutter — mahahalagang konsepto, arkitektura at widget

Ano ang Flutter

Flutter ay isang SDK (Software Development Kit) at framework para sa paggawa ng user interface, inanunsyo ng Google noong 2015. Ang unang stable na bersyon na Flutter 1.0 ay inilabas noong Disyembre 2018. Hindi tulad ng React Native, hindi gumagamit ang Flutter ng bridge sa pagitan ng JavaScript at native code — direkta itong nagko-compile sa native na instruction ng processor.

Ang pangunahing tampok ng Flutter ay ang sarili nitong rendering engine. Hindi umaasa ang framework sa UIKit (iOS) o Android View system. Sa halip, iginuguhit ng Flutter ang bawat pixel nang nakapag-iisa sa pamamagitan ng Skia (hanggang 2024) o ang bagong Impeller engine. Ginagarantiya nito ang parehong hitsura ng aplikasyon sa lahat ng platform at inaalis ang mga problema sa pag-aangkop sa iba't ibang bersyon ng OS.

Ayon sa datos ng Statista 2024, ang Flutter ay nasa unang pwesto sa mga cross-platform framework sa kasikatan: humigit-kumulang 46% ng mga developer ang gumagamit nito para sa mobile development. Ginagamit ang framework sa mga proyekto ng Google Pay, Alibaba, eBay, BMW at Tencent.

Kasaysayan at bersyon ng Flutter

Ang unang alpha version ng Flutter ay ipinakita sa Dart Developer Summit noong 2015 sa ilalim ng pangalang Sky. Noong 2018, inilabas ang Flutter 1.0 na may suporta lamang para sa iOS at Android. Nagdagdag ang Flutter 2.0 (2021) ng Web at Desktop. Ipinakilala ng Flutter 3.0 (2022) ang stable na suporta para sa macOS at Linux. Ipinakilala ng Flutter 3.16 (2023) ang Impeller — bagong rendering engine na batay sa Metal at Vulkan.

Ang bersyon na Flutter 3.22 (2024) ay may kasamang Impeller bilang default sa iOS, pinahusay na suporta para sa Material Design 3, Dart 3.4 na may macro extension at built-in na suporta para sa Native Assets para sa direktang pag-access sa mga mapagkukunan ng platform. Iniulat ng Google na binabawasan ng Impeller ang jank ng 90% kumpara sa Skia.

Wikang Dart

Dart ay isang programming language na nilikha ng Google noong 2011 at ginagamit sa Flutter. Pinagsasama ng Dart ang mahigpit na pag-type sa mga kakayahan ng JIT compilation (para sa Hot Reload) at AOT compilation (para sa production build). Ipinakilala ng Dart 3.0 (2023) ang pattern matching, sealed class at records bilang mga stable na feature.

Null safety sa Dart — isang mandatoryong feature na ipinakilala mula sa bersyon 2.12. Sinusuri ng compiler ang lahat ng nullable type sa yugto ng pag-build, inaalis ang NullPointerException sa runtime. Ang mga uri ng data (int, String, bool) ay non-nullable bilang default, at para sa nullable na halaga ay ginagamit ang suffix ? (halimbawa, String? name).

Arkitektura ng Flutter

Arkitektura ng Flutter ay binuo sa tatlong-layer na prinsipyo. Ang ibabang layer — engine (C/C++), responsable para sa rendering, input/output at access sa platform API. Ang gitnang layer — framework (Dart), nagpapatupad ng sistema ng widget, gesture, animation at navigation. Ang itaas na layer — aplikasyon (Dart), na nagtitipon ng mga widget sa isang tree.

Widget at widget tree

Sa Flutter lahat ay widget. Ang widget ay may dalawang uri: StatelessWidget (hindi nagbabago, hindi nag-iimbak ng estado) at StatefulWidget (nagbabago, namamahala ng estado sa pamamagitan ng State). Ang widget tree ay isang hierarchical na istraktura kung saan ang bawat child widget ay naka-nest sa parent. Scaffold, AppBar, Container, Text, Column, Row — mga pangunahing building block.

BuildContext ay isang object na nagpapasa ng posisyon ng widget sa tree. MediaQuery.of(context) ay kumukuha ng laki ng screen, Theme.of(context) — kasalukuyang tema. Ginagamit ang BuildContext para sa navigation (Navigator.of(context)), access sa InheritedWidget at locale translation sa pamamagitan ng Localizations.of.

Impeller engine

Impeller ay isang modernong Flutter rendering engine, na nakasulat sa C++ at gumagamit ng Metal (iOS/macOS) at Vulkan (Android). Hindi tulad ng Skia na nagre-redraw ng bawat frame mula sa simula, ang Impeller ay nag-co-compile ng shader nang maaga at iniimbak ang mga ito sa cache. Inaalis nito ang pagkaantala sa unang rendering ng mga kumplikadong scene at binabawasan ang load ng GPU.

Ang mga pagsubok ng Google Flutter Team ay nagpapakita na binabawasan ng Impeller ang oras ng compilation ng shader mula 200–500 ms (Skia) hanggang 1–3 ms. Sa iPhone 13 Pro, ang Impeller rendering ay umaabot ng 120 FPS nang walang pagkawala ng frame. Sa Android na may Vulkan, stable na 60 FPS kahit sa mid-range na device (Xiaomi Redmi Note 12).

Halimbawa ng aplikasyon sa 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 App')),
        body: const Center(
          child: Text('Kumusta, Flutter!'),
        ),
      ),
    );
  }
}

Mga bentahe ng Flutter

Isang codebase — pangunahing bentahe ng Flutter. Isang proyekto sa Dart ang nagko-compile para sa iOS, Android, Web, Windows, macOS at Linux. Ayon sa pagtatantya ng Google, binabawasan nito ang oras ng development ng 30–50% kumpara sa magkahiwalay na iOS at Android na proyekto. Binawasan ng Alibaba ang oras ng pag-release ng bersyon ng 30% pagkatapos lumipat sa Flutter.

Pagganap ng Flutter ay malapit sa native. Ang AOT compilation ng Dart sa machine code para sa ARM at x86_64 ay inaalis ang interpretasyon delay. Ginagarantiya ng Impeller engine ang 60 FPS kahit sa mga device noong 2018 (iPhone XR, Samsung Galaxy S9). Ayon sa Google, 99.5% ng mga frame sa Flutter application ay nai-render nang walang pagkawala.

Hot Reload — teknolohiya ng instant code update. Binabago ng developer ang source code, sine-save ang file at muling itinatayo ng Flutter ang widget tree sa 300–800 ms nang hindi nawawala ang kasalukuyang estado ng aplikasyon. Pinapabilis nito ang mga iteration ng UI design: ang mga margin, kulay at animation ay maaaring baguhin sa segundo nang hindi naghihintay ng buong rebuild.

Material Design 3 at sariling wika ng disenyo na Cupertino (estilo ng iOS) ay kasama sa standard na bundle ng Flutter. Ang Material 3 widget ay sumusuporta sa dynamic na kulay (Material You), adaptive layout at transition animation sa pagitan ng screen. Ang CupertinoPageTransition at CupertinoNavigationBar ay ginagaya ang behavior ng native iOS navigator.

Pag-customize ng widget ay hindi nangangailangan ng paggawa ng custom na View sa bawat platform. Sapat na i-override ang build() at magbalik ng bagong widget. Ang package na animation (AnimatedContainer, Hero, TweenAnimationBuilder) at gesture (GestureDetector, Dismissible) ay sumasaklaw ng 95% ng UI animation scenario nang hindi nagsusulat ng platform code.

Ecosystem at package ng Flutter

pub.dev — opisyal na package registry para sa Dart at Flutter. Noong Hulyo 2024, mahigit 45,000 package na ang nai-publish sa registry. Ang pag-install ng package ay ginagawa sa pamamagitan ng command na flutter pub add . Awtomatikong nire-resolve ng Pub ang mga dependency, sinusuri ang compatibility ng bersyon at nagge-generate ng pubspec.lock.

Ang pamamahala ng estado sa Flutter — isa sa mga pangunahing gawain ng arkitektura. Bukod sa flutter_bloc, ang mga sikat na solusyon: Provider (inirerekomenda ng Google, gumagamit ng InheritedWidget), Riverpod (muling idinisenyong bersyon ng Provider na may compile-time safety) at GetX (lahat-sa-isa: estado, routing, DI). Ang Provider ay nananatiling pinakasimpleng simulan: Binabalot ng ChangeNotifierProvider ang modelo, at muling iginuguhit ng Consumer ang widget kapag nagbago ang data.

Pagsubok sa Flutter ay sinusuportahan sa tatlong antas. Ang unit test (flutter test) ay sumusuri sa mga function at class na walang UI. Ang widget test (testWidgets) ay nagre-render ng indibidwal na widget sa isolated na kapaligiran. Ang integration test (IntegrationTest) ay nagpapatakbo ng buong aplikasyon sa device o simulator. Nagdagdag ang Flutter 3.22 ng suporta para sa patch test sa pamamagitan ng patch analytics at pinahusay na code coverage report.

Mga sikat na package

dio — HTTP client na may suporta para sa interceptor, timeout at FormData. Ginagamit sa 40% ng Flutter project sa GitHub. Sinusuportahan ng Dio ang pag-intercept ng request para sa logging, retry at pagdagdag ng authorization token. Ang pangalawang pinakasikat na library — retrofit, ay nagge-generate ng typed API client.

flutter_bloc — library para sa pamamahala ng estado batay sa BLoC (Business Logic Component) pattern. Nagpapasa ang BlocProvider ng estado pababa sa widget tree, muling iginuguhit ng BlocBuilder ang UI kapag nagbago ang estado at nagpapatupad ang BlocListener ng side effect (navigation, SnackBar). Ang Cubet — pinasimpleng bersyon ng BLoC na walang event.

go_router — declarative navigation para sa Flutter mula sa Google. Ang ruta ay inilalarawan sa GoRouter configuration na may suporta para sa nested route, redirect at deep link. Hinahati ng ShellRoute ang navigation sa tab ng BottomNavigationBar. Sinusuportahan ng GoRouter 14.0 ang type-safe path at StatefulShellRoute na may pagpapanatili ng tab state.