Scaffold: ano ito, istraktura at mga widget ng Flutter

Ano ang Scaffold sa Flutter

Scaffold — ay isang widget-compositor mula sa Material Design library na bumubuo ng pangunahing visual na istraktura ng screen. Ipinapatupad nito ang karaniwang pattern ng Material app: itaas na panel, katawan ng screen, side menu, at lumulutang na mga button. Hindi tulad ng Container na nagtatakda lamang ng mga sukat at estilo, pinamamahalaan ng Scaffold ang buong screen bilang isang pinag-isang sistema.

Bawat Flutter app na binuo ayon sa Material Design ay nagsisimula sa MaterialApp, sa loob kung saan ang bawat screen ay nakabalot sa Scaffold. Ito ang Scaffold na nagsisiguro ng tamang pagpapakita ng AppBar sa lahat ng device, isinasaalang-alang ang SafeArea para sa iPhone X at mas bago. Ito rin ang responsable para sa z-order: Ang Drawer ay ipinapakita sa itaas ng body, at ang SnackBar — sa itaas ng buong interface, ngunit sa ibaba ng mga dialog window.

Ayon sa opisyal na Flutter API Reference (2026), ang Scaffold ay isang sapilitang kondisyon para sa tamang paggana ng mga widget tulad ng SnackBar, BottomSheet at PersistentBottomSheet. Kung walang Scaffold, ang mga component na ito ay nag-throw ng exception dahil umaasa sila sa InheritedWidget Scaffold.of para ma-access ang konteksto ng Scaffold. Kaya ang paglalagay ng anumang nilalaman nang direkta sa Container sa halip na Scaffold ay isang karaniwang pagkakamali ng mga baguhang developer, na nagreresulta sa pagkawala ng Material functionality.

Scaffold sa hierarchy ng widget

Sa isang tipikal na Flutter app, ang Scaffold ay nasa loob ng MaterialApp, karaniwan sa ilalim ng WidgetsApp o CupertinoApp sa cross-platform development. Ang MaterialApp ay lumilikha ng Navigator at tema, at ang Scaffold ay tumutukoy sa istraktura ng kasalukuyang screen. Bawat screen ay maaaring magkaroon ng sarili nitong Scaffold na may natatanging AppBar, Drawer at BottomNavigationBar, na nagpapahintulot ng flexible na pagsasaayos ng interface para sa isang partikular na pahina.

Para sa malalim na customization, ang Scaffold ay maaaring pagsamahin sa NestedScrollView — ito ay nagpapahintulot ng pagpapatupad ng mga kumplikadong scroll effect, halimbawa, isang nawawalang AppBar na may parallax effect. Gayunpaman, sa karamihan ng mga kaso, ang standard na Scaffold kasama ang mga property nito ay sapat na para sa pagbuo ng production-ready na screen.

Istraktura ng Scaffold: mga pangunahing bahagi ng balangkas

Scaffold ay binubuo ng ilang sapilitan at opsyonal na mga zone, bawat isa ay responsable para sa isang partikular na bahagi ng interface. Tingnan natin ang bawat bahagi nang hiwalay upang maunawaan kung paano sila nag-interact sa isa’t isa.

AppBar — itaas na panel

AppBar — itaas na panel ng screen na nagpapakita ng pamagat, navigation button, at mga aksyon. Awtomatiko itong nakakakuha ng tamang taas na 56dp at isinasaalang-alang ang SafeArea para sa mga device na may notch. Sa AppBar ay maaaring i-embed ang TabBar para sa paglipat ng mga tab gamit ang bottom property.

Drawer — side menu

Drawer — panel na lumalabas mula sa kaliwa at nagbibigay ng navigation sa mga section ng app. Awtomatikong nagdaragdag ang Scaffold ng hamburger icon sa AppBar kung ang drawer property ay nakatakda. Ang Drawer ay maaaring maglaman ng DrawerHeader, ListView na may mga item sa menu, at impormasyon ng user.

BottomNavigationBar — ilalim na navigation

BottomNavigationBar — panel sa ibabang bahagi ng screen para sa paglipat sa pagitan ng mga pangunahing section. Naglalaman ito ng 2 hanggang 5 icon na may mga label at sumusuporta sa Material 3 na may aktibong indikasyon sa pamamagitan ng NavigationBar. Inilalagay ito ng Scaffold sa ilalim ng screen, awtomatikong inaangat ang body upang hindi matakpan ang nilalaman.

FloatingActionButton — lumulutang na button

FloatingActionButton — isang bilog na button na inilalagay sa kanang ibabang sulok ng screen. Ginagamit ito para sa pangunahing aksyon sa screen, halimbawa, pagdagdag ng bagong entry o pagpapadala ng mensahe. Sinusuportahan ng Scaffold ang maraming FAB na may pinahabang animation sa pamamagitan ng extended properties.

Body — pangunahing nilalaman

Body — sentral na lugar ng screen kung saan inilalagay ang pangunahing nilalaman. Bilang body ay maaaring maging anumang widget: Column, ListView, GridView, Stack o custom na komposisyon. Awtomatikong kinakalkula ng Scaffold ang taas ng body na isinasaalang-alang ang AppBar, BottomNavigationBar at SafeArea, na nag-aalis ng pangangailangan para sa manu-manong pagsasaayos ng laki.

Mga pangunahing property ng Scaffold

Scaffold ay nagbibigay ng higit sa 30 property para sa pag-configure ng hitsura at pag-uugali ng screen. Kabilang sa mga ito ay parehong sapilitan (body) at opsyonal na mga property na namamahala ng mga puwang, background, at estado ng keyboard. Ang pag-unawa sa bawat property ay tumutulong na tumpak na ayusin ang interface ayon sa mga pangangailangan ng disenyo.

Ang property na resizeToAvoidBottomInset ay lalong mahalaga kapag nagtatrabaho sa mga form: kapag nakatakda sa true (default), awtomatikong pinipiga ng Scaffold ang body kapag lumitaw ang keyboard upang manatiling nakikita ang input field. Tinatanggal nito ang pangangailangan na sumulat ng custom na keyboard listener. Para sa custom na scenario na may SingleChildScrollView, ang property ay maaaring i-disable.

Halimbawa ng paggamit ng Scaffold sa app

Tingnan natin ang isang praktikal na halimbawa ng Scaffold na may kumpletong set ng Material component. Ang code ay lumilikha ng screen na may AppBar, Drawer, BottomNavigationBar, FloatingActionButton at SnackBar — tipikal na istraktura ng isang mobile app sa Flutter.

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Aking App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Mga Setting'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Nakumpleto ang aksyon')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Sa halimbawa, ginagamit ang NavigationBar mula sa Material 3 sa halip na lumang BottomNavigationBar. Awtomatikong iniuugnay ng Scaffold ang lahat ng bahagi: kapag binuksan ang Drawer, nakatago ang SnackBar; kapag nagpalit ng tab, naa-update ang body; at nananatili sa lugar ang FloatingActionButton. Ginagarantiyahan ng ScaffoldMessenger ang pagpapakita ng SnackBar kahit na may maraming Scaffold sa hierarchy.

Scaffold at Material 3: mga tampok ng configuration

Material 3 (M3) — ay ang ebolusyon ng Material Design, na ipinakilala ng Google noong 2023. Ang Scaffold sa M3 ay nakatanggap ng ilang pagbabago: bagong NavigationBar widget sa halip na BottomNavigationBar, suporta para sa Dynamic Color sa pamamagitan ng ColorScheme.fromSeed, at na-update na rekomendasyon para sa mga puwang at taas ng component. Ang paglipat sa M3 ay hindi nangangailangan ng pagpapalit ng Scaffold — sapat na upang i-update ang tema ng app.

Para i-activate ang Material 3 sa proyekto, kailangan mong itakda ang useMaterial3: true sa ThemeData. Awtomatikong inaayos ng Scaffold ang visual na anyo: nagiging mas malaki ang mga puwang (24dp sa halip na 16dp), muling kinakalkula ang mga kulay mula sa seed color, at ang FloatingActionButton ay nakakakuha ng mas malalaking sukat na may bilugan na sulok. Samantala, lahat ng umiiral na property ng Scaffold ay nananatiling functional.

Ayon sa Material Design 3 Specification (2026), inirerekomenda na gamitin ang NavigationBar na may tatlo hanggang limang item sa halip na BottomNavigationBar. Sinusuportahan ng Scaffold ang parehong variant, ngunit ang NavigationBar ay nagbibigay ng mas mahusay na suporta para sa adaptability at Material You sa mga Pixel device.

Pag-configure ng Scaffold para sa Material 3

Para sa tamang paggana ng Scaffold sa M3, sapat na i-update ang tema at palitan ang BottomNavigationBar ng NavigationBar. Ang mga kulay ay awtomatikong kakalkulahin sa pamamagitan ng ColorScheme.fromSeed, at iaayos ng Scaffold ang mga puwang sa mga bagong pamantayan. Kung kinakailangan, maaari mong i-override ang backgroundColor nang direkta.