Flutter sa Mobile Development: Ano Ito, Pangunahing Konsepto at Paano Ito Gumagana

Flutter: mga batayan ng Widget, StatelessWidget at StatefulWidget

Widget — isang deklaratibong paglalarawan ng bahagi ng UI. Lahat sa Flutter ay Widget: mula sa isang button hanggang sa mismong app. Ang Widget ay configuration (hindi ang UI mismo). StatelessWidget — isang hindi nababagong Widget. Ang build() ay tinatawag nang isang beses. Walang estado. Ginagamit para sa static na nilalaman. StatefulWidget — isang nababagong Widget. Mayroong State object na maaaring magbago. setState() — nagti-trigger ng rebuild. State — isang nababagong object na nakatali sa StatefulWidget. Naglalaman ng data na maaaring magbago.

StatelessWidget vs StatefulWidget

StatelessWidget — ang build() ay tinatawag nang isang beses. Angkop para sa mga header, icon, static na teksto. StatefulWidget — ang build() ay tinatawag tuwing tatawagin ang setState(). Angkop para sa mga form, listahan na may pagbabago, timer. InheritedWidget — pagpapasa ng data pababa nang hindi tahasang dumadaan sa mga constructor. Theme, MediaQuery, Navigator — InheritedWidget. BuildContext — posisyon ng Widget sa tree. context.of<T>, context.watch<T>, context.select<T,R> — access sa InheritedWidget.

// Halimbawa Flutter Widget: StatefulWidget na may 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 — configuration. StatelessWidget — hindi nababago. StatefulWidget — nababago gamit ang setState(). Inirerekomenda ng IT Sectr na magsimula sa StatelessWidget at lumipat sa StatefulWidget lamang kapag kailangan ang estado.

Tree (Widget Tree, Element Tree, RenderObject Tree)

Gumagamit ang Flutter ng tatlong tree para sa mahusay na rendering. Widget Tree — configuration tree. Ang mga Widget ay madalas na ginagawa (bawat build), magaan. Element Tree — elemento tree. Isang elemento bawat Widget (kung hindi nagbabago ang uri). Element — tulay sa pagitan ng Widget at RenderObject. RenderObject Tree — rendering tree. Humahawak ng mga sukat, posisyon, pagguhit. RenderObject — mabigat, bihirang gawin. Inihahambing ng Flutter ang Widget Tree at ina-update ang Element Tree, na nagti-trigger ng pag-update ng RenderObject Tree.

Keys at Element Tree

Key — identifier ng Widget sa Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Pinapayagan ng Keys ang Flutter na itugma ang luma at bagong Widget sa panahon ng rebuild. Kung walang Keys, itinutugma ng Flutter ayon sa uri at posisyon ng Widget. GlobalKey — access sa State mula sa ibang Widget. Ginagamit para sa: kumplikadong form, animation, access sa State sa mga test. Inirerekomenda ng IT Sectr ang paggamit ng Keys para sa mga listahan (List.generate) at iwasan ang GlobalKey maliban kung kinakailangan.

Expanded — Widget na pumupuno sa available na espasyo sa Row/Column/Flex. Flexible — hindi pinipilit ang pagpuno (maaaring mas maliit). MediaQuery — InheritedWidget na may impormasyon ng device: laki ng screen, oryentasyon, platform, text scale factor. Theme/ThemeData — sentralisadong tema. Theme.of(context) — access. MaterialApp — root Widget para sa configuration ng routing, tema, locale. Scaffold — pangunahing layout na may AppBar, Drawer, BottomNavigationBar. AppBar — itaas na panel.

Nabigasyon (Navigator, Route)

Navigator — stack ng ruta (Routes). Navigator.push — buksan ang screen (nagbabalik ng Future). Navigator.pop — isara (may resulta). MaterialPageRoute — animated na transition (slide mula kanan). Named Routes — string identifier. onGenerateRoute — sentralisadong handler. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — deklaratibong nabigasyon para sa web, deep linking at kumplikadong scenario.

Navigator 2.0

Navigator 2.0 — deklaratibong nabigasyon. Router — sentral na Widget. RouteInformationParser — pag-parse ng URL. RouterDelegate — pamamahala ng stack. GoRouter (package) — pinasimpleng wrapper sa ibabaw ng Navigator 2.0. Sinusuportahan: pinangalanang ruta, parameter, redirect, deep linking. Inirerekomenda ng IT Sectr ang GoRouter para sa karamihan ng proyekto at Navigator 2.0 lamang para sa kumplikadong scenario (web, desktop).

Async (FutureBuilder, StreamBuilder)

FutureBuilder — Widget na bumubuo ng UI batay sa Future. connectionState: none, waiting, active, done. Ginagamit para sa: HTTP request, pagbasa ng DB, timer. StreamBuilder — Widget para sa Stream (walang hanggang daloy ng data). snapshot.data, snapshot.hasError, snapshot.hasData. Ginagamit para sa: WebSocket, Firebase, update ng lokasyon. Ang parehong Widget ay nagre-rebuild kapag nakatanggap ng bagong data.

Pamamahala ng Estado

Provider — simpleng DI + pamamahala ng estado. ChangeNotifierProvider, MultiProvider. Riverpod — modernong kapalit ng Provider: ligtas sa compile, independyente sa BuildContext. Bloc — arkitekturang Event-Driven: Cubit (simpleng event) vs Bloc (kumplikado). GetX — magaan na pamamahala ng estado + DI + routing. setState — pinakasimple, para sa lokal na estado. Inirerekomenda ng IT Sectr ang Riverpod para sa bagong proyekto at Provider para sa umiiral na proyekto.

Tema at Pag-aangkop (MediaQuery, ThemeData)

MediaQuery — laki ng screen, oryentasyon, platform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — tema ng app: mga kulay, font, hugis. Theme.of(context).textTheme.bodyLarge. Hot Reload — pag-inject ng code sa tumatakbong app. Nagpapanatili ng estado. Hindi sinusuportahan: pagbabago ng main(), global variable, static field. Hot Restart — buong restart ng app (pagkawala ng estado). Hot Reload — pangunahing bentahe ng Flutter para sa mga developer.

StatelessWidget — para sa static na nilalaman. StatefulWidget — para sa dinamikong nilalaman. InheritedWidget — para sa DI. Inirerekomenda ng IT Sectr ang StatelessWidget bilang default at StatefulWidget lamang kapag kinakailangan.

Responsive Layout

LayoutBuilder — umangkop sa sukat ng magulang. OrientationBuilder — umangkop sa oryentasyon. Expanded vs Flexible — pamamahagi ng espasyo sa Row/Column. MediaQuery — breakpoint para sa tablet at desktop. SafeArea — margin mula sa system element (notch, status bar). AspectRatio — pagpapanatili ng proporsyon. Inirerekomenda ng IT Sectr ang LayoutBuilder para sa adaptive layout at OrientationBuilder para sa landscape na oryentasyon.

Pagsubok (Widget, Integration, Unit)

Unit test — pagsubok ng business logic, repository, modelo. dart test — pagpapatakbo. Widget test — pagsubok ng widget nang nakahiwalay. WidgetTester — pumpWidget, tap, enterText. Integration test — buong scenario sa totoong device/emulator. Mockito — pag-mock ng dependencies. Golden test — paghahambing ng screenshot (golden file). Inirerekomenda ng IT Sectr ang Widget test para sa bawat screen at Unit test para sa business logic.

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

Animation (Implicit, Explicit, Hero)

Implicit animation — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Ang mga pagbabago sa property ay awtomatikong nag-a-animate. Explicit animation — AnimationController na may Tween. forward() / reverse(). Hero animation — Hero Widget na may tag — transition animation sa pagitan ng screen. Staggered animation — chain ng animation na may Interval. Lottie — integrasyon ng After Effects animation. Rive — interactive na animation (state machine). Inirerekomenda ng IT Sectr ang AnimatedContainer para sa 80% ng kaso at AnimationController para sa kumplikadong scenario.

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

Networking (http, dio, graphql)

http — simpleng HTTP client (get, post, put, delete). dio — advanced na client na may interceptor, timeout, retry, logging. graphql_flutter — GraphQL client para sa Flutter. json_serializable — pagbuo ng fromJson/toJson sa pamamagitan ng annotation. Retrofit Dart — type-safe HTTP client tulad ng Retrofit. WebSocket — sa pamamagitan ng web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. Inirerekomenda ng IT Sectr ang dio para sa REST API at graphql_flutter para sa GraphQL.

Flutter DevTools — set ng tool: Inspector (widget tree), Timeline (performance), Memory, Network, Logging. Profile mode — profiling walang debug. Performance overlay — FPS, oras ng build. Flame chart — flame chart tracing. DevTools — mahalagang tool para sa pag-optimize ng Flutter application sa produksyon.

Flutter Web — pag-compile ng Flutter sa WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, ngunit mas mabigat. HTML renderer — magaan, ngunit may limitasyon. WASM (Flutter 3.22+) — native performance. Responsive adaptation sa pamamagitan ng LayoutBuilder at MediaQuery. Inirerekomenda ng IT Sectr ang CanvasKit para sa desktop web application at HTML renderer para sa content site.