Flutter Widgets — ano ito, puno ng widget at build

Ano ang Flutter Widgets?

Flutter Widgets — lahat ng UI elemento sa Flutter framework, na ipinatupad bilang hindi nababagong (immutable) Dart classes. Ang widget ay isang configuration ng isang UI elemento: ang laki, kulay, posisyon, paghawak ng kaganapan. Hindi tulad ng Android (XML + View) o iOS (Storyboard + UIView), ang Flutter ay hindi gumagamit ng native na mga bahagi — lahat ay iginuhit ng Skia engine (Android/iOS/Linux) o Impeller (iOS/macOS) sa Canvas. Tinitiyak nito ang magkaparehong hitsura sa lahat ng platform nang walang pagkakaiba sa platform. Ang Flutter ay may dalawang set ng widget: Material Widgets (disenyo ng Google Material Design 3 para sa Android/Web) at Cupertino Widgets (disenyo ng Apple HIG para sa iOS/macOS). Maaaring pagsamahin ng developer ang parehong set sa isang app. Bawat widget ay may build() method na nagbabalik ng child widget o komposisyon ng mga ito — ganito binuo ang puno ng widget.

Tatlong puno ng Flutter

Gumagana ang Flutter sa tatlong puno: Widget Tree (configuration, ginawa ng developer), Element Tree (pagtutugma ng widget sa posisyon sa puno, pinamamahalaan ng framework), Render Tree (mga bagay na nagkalkula ng layout at nagsasagawa ng paint). Gumagawa ang Widget ng Element, na gumagawa ng RenderObject. Ang Element ay muling ginagamit sa pagbabago ng configuration (rebuild) — ito ang mekanismo ng optimisasyon ng Flutter: kung pareho ang uri ng widget at key, hindi muling nilikha ang Element, sa halip ay ina-update ang bagong configuration. Ang pag-unawa sa tatlong puno ay susi sa pag-optimize ng pagganap ng mga Flutter app.

StatelessWidget: hindi nababagong mga widget

StatelessWidget — isang widget na hindi nag-iimbak ng panloob na estado. Tumatanggap ito ng mga parameter sa pamamagitan ng constructor at ipinapakita ang mga ito nang walang posibilidad na magbago pagkatapos ng build. Ang StatelessWidget ay mainam para sa mga static na elemento: mga heading, icon, avatar, listahan na may nakapirming data. Ang build() method ay tinatawag nang isang beses sa paggawa at sa pagbabago ng parent widget. Dahil ang StatelessWidget ay walang estado, hindi ito nangangailangan ng hiwalay na State object — ang build() ay direktang tinukoy sa klase ng widget.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — isang StatelessWidget na tumatanggap ng name at avatarUrl sa pamamagitan ng constructor. Ipinapakita ng CircleAvatar ang avatar, Text ang pangalan. Hindi mababago ng widget ang mga halagang ito pagkatapos ng paggawa. Ang paggamit ng const constructor (const ProfileHeader) ay nagpapahintulot sa Flutter na muling gamitin ang instance ng widget sa rebuild ng parent — ito ay isang micro-optimization na inirerekomenda para sa lahat ng StatelessWidget.

StatefulWidget: mga widget na may estado

StatefulWidget — isang widget na may nababagong estado, na nakaimbak sa isang hiwalay na State object. Ang StatefulWidget mismo ay hindi nababago (immutable), tulad ng StatelessWidget. Ang nababagong bahagi ay inilalagay sa State: State — isang bagay na ginagawa nang isang beses at nakaligtas sa maraming rebuild ng widget. Kapag nagbago ang estado (setState()), tinatawag ng Flutter ang build() ng State, ina-update ang UI. Ang StatefulWidget ay ginagamit para sa mga interactive na elemento: mga counter, text field, checkbox, animation, timer.

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — isang StatefulWidget na may State class na _LikeButtonState. Ang mga field na liked at count ay estado na nakaimbak sa State at hindi nirerese sa rebuild. setState() ay nagpapaalam sa Flutter na kailangan muling buuin ang UI. Hindi muling nililikha ng Flutter ang State sa bawat rebuild ng parent — tanging sa pagbabago ng configuration (key o uri ng widget). Sa IT Sectr, ginagamit namin ang StatelessWidget para sa display at StatefulWidget para sa mga interactive na bahagi, kasunod ng prinsipyo ng pag-minimize ng StatefulWidget hanggang sa hangganan ng mutation.

Puno ng widget: mula Widget hanggang RenderObject

Widget Tree — ang hierarchical na istraktura ng mga widget na naglalarawan ng UI ng app. Ginagawa ng Flutter ang Widget Tree sa Element Tree: bawat Widget ay gumagawa ng Element na sinusubaybayan ang posisyon sa puno at koneksyon sa RenderObject. Ginagawa ng Render Tree ang layout (pagtukoy ng laki at posisyon) at paint (pagguhit). Ang Element ay ang pangunahing layer ng optimisasyon: kung ang uri ng widget at key ay hindi nagbago sa rebuild, ang Element ay muling ginagamit, ina-update ang configuration nang hindi muling nililikha ang RenderObject. Tinitiyak nito ang pagganap ng Flutter sa mataas na frame rate (60/120 FPS).

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Kumusta, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

Puno ng widget ng HomeScreen: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold — ang pangunahing layout widget ng Material Design. Nasa gitna ng Center ang child na Column. Inaayos ng Column ang mga anak nang patayo na may gitnang pagkakahanay (mainAxisAlignment.center). Kinakalkula ng Flutter ang layout mula sa itaas pababa (ang mga constraint ay ipinapasa mula sa parent) at ang mga laki mula sa ibaba pataas (sizedByParent o sizing from children).

BuildContext: konteksto ng build at access sa puno

BuildContext — deskriptor ng posisyon ng widget sa Element Tree. Bawat build() method ay tumatanggap ng BuildContext, kung saan ang widget ay makaka-access sa:MediaQuery (laki ng screen, oryentasyon, density ng pixel, safe area), Theme (MaterialThemeData o CupertinoThemeData), Navigator (navigation stack), ScaffoldMessenger (SnackBar), InheritedWidget (pagpasa ng data pababa sa puno). Ang BuildContext ay hindi dapat itago pagkatapos ng build() o gamitin sa labas ng synchronous context — ito ay humahantong sa mga error na “Scaffold.of() called with a context that does not contain a Scaffold”. Sa halip na itago ang context, gamitin ang Builder widget o InheritedWidget pattern para sa access sa data.

Key: pagkakakilanlan ng widget sa puno

Key — isang opsyonal na parameter ng constructor ng bawat widget (super.key). Tinutulungan ng Key ang Flutter na kilalanin ang widget sa pagbabago ng pagkakasunod-sunod/bilang ng mga elemento sa isang listahan. Kung walang key, ikinukumpara ng Flutter ang mga widget ayon sa uri at posisyon; kapag nagdagdag ng elemento sa gitna ng listahan nang walang key, muling ginagamit ng Flutter ang Element para sa maling widget, na nagdudulot ng mga bug sa estado (StatefulWidget) at animation. Gumamit ng ValueKey (natatanging identifier) para sa mga listahan, ObjectKey (batay sa data object), UniqueKey (garantisadong natatangi sa bawat rebuild — para sa sapilitang muling paggawa).

Katalogo ng widget ng Flutter: Material, Cupertino, Layout

Flutter SDK (stable na bersyon 3.3+, Dart 3+) ay may kasamang 200+ built-in na widget, nahahati sa mga kategorya: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) at Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Ang mga Layout widget ay pundasyon ng bawat Flutter UI: Row para sa pahalang na pagkakasunod-sunod, Column para sa patayo, Stack para sa magkakapatong na elemento, Container na may BoxDecoration para sa dekorasyon.