AppBar — ano ito, pag-configure at mga widget ng Flutter

Ano ang AppBar sa Flutter

AppBar — ay isang standard Material component ng itaas na panel na ipinapakita sa itaas na bahagi ng Scaffold. Naglalaman ito ng pamagat ng screen, navigation button (karaniwang hamburger icon o “Bumalik” na arrow) at mga aksyon — mga icon na nagbubukas ng paghahanap, mga setting, o iba pang function. Ang AppBar ay awtomatikong umaangkop sa platform: sa Android ginagamit ang standard Material bottom-shadow, sa iOS — mas flat na disenyo na may transparency.

Ang AppBar ay nagpapatupad ng PreferredSizeWidget interface, na nangangahulugang ang taas nito ay fixed at alam bago ang pagbuo. Bilang default, ang taas ng AppBar ay 56dp sa Android at 44dp sa iOS sa portrait orientation, na isinasaalang-alang ang SafeArea sa itaas. Ang tampok na ito ay nagpapahintulot sa Scaffold na kalkulahin nang maaga ang available na espasyo para sa body, iniiwasan ang recomposition sa pag-render.

Ayon sa Flutter Material Library Guide (2026), ang AppBar ay dumaan sa ilang mga iteration: sa Flutter 1.x ito ay isang simpleng container na may text, sa Flutter 2.x nakatanggap ito ng suporta para sa Material 3 at flexibleSpace, at sa Flutter 3.x — integrasyon sa System UI (kulay ng status bar, transparency). Ang modernong AppBar ay sumusuporta sa Dynamic Color mula sa Material You sa mga Android 12+ device.

Istraktura ng AppBar: mga property at parameter

AppBar ay nagbibigay ng isang set ng mga parameter na kumokontrol sa bawat bahagi ng itaas na panel. Ang pag-unawa sa mga property na ito ay nagbibigay-daan sa flexible na pag-configure ng panel para sa anumang disenyo nang hindi gumagawa ng custom solutions.

Title at leading: pag-configure ng pamagat at navigation

Ang property na title ay tumatanggap ng anumang widget, ngunit ang pinaka-ginagamit ay Text na may style configuration sa pamamagitan ng TextStyle. Para sa mahabang pamagat, inirerekomenda na balutin ang title sa Flexible upang ang text ay ma-trim nang tama kapag kulang ang espasyo. Ang property na leading ay awtomatikong pinapalitan ng BackButton sa paglipat sa nested screen sa pamamagitan ng Navigator.push, kung hindi explicitly na naka-set.

Actions: paglalagay ng action icons

Ang listahan ng actions ay naglalaman ng mga widget na naka-align sa kanang gilid ng AppBar. Ang bawat elemento ay hindi dapat mas malapad sa 48dp (standard Material Design). Para sa pag-grupo ng mga aksyon, gamitin ang PopupMenuButton — ito ay nagtatago ng hindi gaanong importanteng opsyon sa dropdown menu at sumusunod sa Material na rekomendasyon para sa density ng interface.

Pag-customize ng AppBar: mga estilo, kulay at pag-uugali

AppBar ay sumusuporta sa malalim na pag-customize sa pamamagitan ng mga property ng kulay, anino, at margin. Ang pangunahing hitsura ay minana mula sa tema ng app, ngunit ang bawat property ay maaaring i-override nang isa-isa. Tingnan natin ang mga pangunahing scenario ng pag-configure.

Ang kulay ng background ng AppBar ay naka-set sa pamamagitan ng backgroundColor. Kung hindi tinukoy, ginagamit ang appBarTheme mula sa ThemeData. Sa Material 3, ang kulay ng AppBar ay awtomatikong kinakalkula mula sa ColorScheme.primary, ngunit maaaring i-override para sa isang partikular na screen. Para sa transparent na AppBar (madalas gamitin sa profiles), i-set ang backgroundColor: Colors.transparent na may elevation: 0.

Ang property na elevation ay kumokontrol sa anino sa ilalim ng AppBar. Ang value na 0 ay nag-aalis ng anino, na lumilikha ng “flat” panel effect, na may kaugnayan sa Material 3. Ang value na 4 ay nagbibigay ng standard Material Design shadow. Para sa custom na kontrol ng anino, gamitin ang shadowColor — ang kulay ng anino na biswal na naghihiwalay ng panel mula sa nilalaman.

Para sa pagkontrol ng kulay ng text sa AppBar, gamitin ang foregroundColor. Ang property na ito ay nakakaapekto sa kulay ng pamagat, mga icon, at text sa actions. Sa pagbabago ng backgroundColor, awtomatikong pipili ng contrast na foregroundColor, ngunit maaaring i-set nang sapilitan para sa hindi standard na mga disenyo.

SliverAppBar: animated na bersyon ng AppBar

SliverAppBar — ay extension ng AppBar para sa paggamit sa loob ng CustomScrollView, na sumusuporta sa animation sa pag-scroll: pag-collapse (collapsing), parallax effect, at pag-pin (pinned). Hindi tulad ng standard AppBar, ang SliverAppBar ay isang sliver widget at maaaring dynamic na magbago ng laki depende sa scroll position.

Ang mga pangunahing mode ng SliverAppBar ay tinutukoy ng kumbinasyon ng mga property na pinned, floating, at snap. Sa pinned mode, ang panel ay laging nakikita sa itaas na bahagi ng screen. Sa floating mode, lumilitaw ito sa pag-scroll pabalik. Ang kumbinasyon ng floating + snap ay lumilikha ng “malagkit” na panel behavior na lumalabas sa pinakamaliit na pag-scroll pataas, na kadalasang ginagamit sa mga news feed.

Ayon sa Flutter API SliverAppBar (2026), para gamitin ang SliverAppBar, kailangan mong palitan ang regular na ListView o Column ng CustomScrollView na may sliver widgets. Ang Scaffold ay patuloy na gumagana nang tama, ngunit ang appBar property ng Scaffold ay dapat null — ang SliverAppBar ay inilalagay sa loob ng CustomScrollView bilang unang sliver.

Halimbawa ng pag-configure ng AppBar sa app

Tingnan natin ang halimbawa ng AppBar na may paghahanap, dropdown menu, at TabBar. Ang code na ito ay nagpapakita ng tipikal na configuration ng itaas na panel sa isang production Flutter app.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalogo'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Mga Setting')),
          const PopupMenuItem(value: 'about', child: Text('Tungkol sa App')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Sa halimbawa, ang AppBar ay naglalaman ng naka-center na pamagat, button para buksan ang Drawer sa kaliwa, icon ng paghahanap, at dropdown menu sa kanan. Ang TabBar sa bottom ay nagbibigay-daan sa paglipat sa pagitan ng mga kategorya ng produkto. Ang configuration na ito ay sumasaklaw sa karamihan ng mga scenario ng mobile apps: navigation, paghahanap, karagdagang opsyon, at paglipat sa pagitan ng mga seksyon — lahat sa isang itaas na panel.