Scaffold: шта је, структура и Flutter виџети

Шта је Scaffold у Flutter-у

Scaffold — то је виџет-композитор из Material Design библиотеке који формира основну визуелну структуру екрана. Он имплементира стандардни образац Material апликације: горњи панел, тело екрана, бочни мени и плутајуће дугмиће. За разлику од Container-а, који само поставља димензије и стил, Scaffold управља целим екраном као јединственим системом.

Свака Flutter апликација изграђена према Material Design почиње са MaterialApp, унутар које је сваки екран умотан у Scaffold. Управо Scaffold осигураје правилан приказ AppBar-а на свим уређајима, узимајући у обзир SafeArea за iPhone X и новије. Он таћође одговара за z-поредак: Drawer се приказује изнад body, а SnackBar — изнад целокупног интерфејса, али испод дијалошких прозора.

Према службеној Flutter API Reference (2026), Scaffold је обавезан услов за правилан рад виџета као што су SnackBar, BottomSheet и PersistentBottomSheet. Без Scaffold-а, ови компоненти бацају изузетку, јер зависе од InheritedWidget Scaffold.of за приступ контексту Scaffold-а. Зато је постављање било којег садржаја директно у Container уместо Scaffold-а честа грешка почетних програмера, која доводи до губитка Material функционалности.

Scaffold у хијерархији виџета

У типичној Flutter апликацији, Scaffold се налази унутар MaterialApp-а, обично испод WidgetsApp или CupertinoApp у cross-platform развоју. MaterialApp креира Navigator и тему, а Scaffold одређује структуру тренутног екрана. Сваки екран може имати сопствени Scaffold са јединственим AppBar, Drawer и BottomNavigationBar, што омогућава флексибилно прилагођавање интерфејса одређеној страници.

За дубоку прилагодавање, Scaffold се може комбиновати са NestedScrollView — ово омогућава реализацију сложених ефеката помицања, на пример, нестајајућег AppBar-а са паралакс ефектом. Међутим, у већини случајева, стандардни Scaffold са својим својствима је довољан за изградњу production-ready екрана.

Структура Scaffold-а: кључни делови скелета

Scaffold се састоји од више обавезних и опционалних зона, од којих свака је задужена за одређени део интерфејса. Размотримо сваки део појединачно да бисмо разумели како међусобно делују.

AppBar — горњи панел

AppBar — горњи панел екрана који приказује наслов, дугме навигације и акције. Аутоматски добија правилну висину од 56dp и узима у обзир SafeArea за уређаје са исецком. У AppBar се може уградити TabBar за пребацивање картица коришћећем својства bottom.

Drawer — бочни мени

Drawer — панел који извлачи са леве стране и пружа навигацију кроз секције апликације. Scaffold аутоматски додаје хамбургер иконицу у AppBar ако је својство drawer постављено. Drawer може да садржи DrawerHeader, ListView са ставкама менија и корисничке информације.

BottomNavigationBar — доња навигација

BottomNavigationBar — панел у доњем делу екрана за пребацивање између главних секција. Садржи од 2 до 5 иконица са натписима и подржава Material 3 са активном индикацијом кроз NavigationBar. Scaffold га позиционира при дну екрана, аутоматски помичући body навише да би садржај био видљив.

FloatingActionButton — плутајуће дугме

FloatingActionButton — округло дугме постављено у доњем десном углу екрана. Користи се за главну акцију на екрану, на пример, додавање новог уноса или слање поруке. Scaffold подржава више FAB-ова са проширеном анимацијом кроз extended својства.

Body — главни садржај

Body — централна област екрана у коју се смешта главни садржај. Као body може да послужи било који виџет: Column, ListView, GridView, Stack или прилагођена композиција. Scaffold аутоматски израчунава висину body-ја узимајући у обзир AppBar, BottomNavigationBar и SafeArea, што елиминише потребу за ручним подешавањем величина.

Основна својства Scaffold-а

Scaffold пружа преко 30 својстава за подешавање изгледа и понашања екрана. Међу њима су како обавезна (body), тако и опционална својства која управљају размакима, позадином и стањем тастатуре. Разумевање сваког својства помаже да се интерфејс прецизно прилагоди захтевима дизајна.

Својство resizeToAvoidBottomInset је посебно важно при раду са формуларима: када је постављено на true (подразумевано), Scaffold аутоматски сабија body при појави тастатуре да би поље за унос остало видљиво. Ово елиминише потребу за писањем прилагођених ослушкивача тастатуре. За прилагођене сценарије са SingleChildScrollView, својство се може ононмогућити.

Пример коришћења Scaffold-а у апликацији

Размотримо практични пример Scaffold-а са потпуним скупом Material компонената. Код креира екран са AppBar, Drawer, BottomNavigationBar, FloatingActionButton и SnackBar — типична структура мобилне апликације у 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('Моја апликација'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Мени')),
            ListTile(title: const Text('Подешавања'), 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('Акција завршена')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

У примеру се користи NavigationBar из Material 3 уместо застарелог BottomNavigationBar-а. Scaffold аутоматски повезује све делове: при отварању Drawer-а SnackBar се сакрива, при пребацивању картица body се ажурира, а FloatingActionButton остаје на месту. ScaffoldMessenger гарантује приказ SnackBar-а чак и при постојању више Scaffold-а у хијерархији.

Scaffold и Material 3: карактеристике подешавања

Material 3 (M3) — је еволуција Material Design-а, коју је Google представио 2023. године. Scaffold у M3 је добио низ промена: нови NavigationBar виџет уместо BottomNavigationBar-а, подршку за Dynamic Color кроз ColorScheme.fromSeed и ажуриране препоруке за размаке и висине компонената. Прелазак на M3 не захтева замену Scaffold-а — довољно је ажурирати тему апликације.

За укључивање Material 3 у пројекту, потребно је поставити useMaterial3: true у ThemeData. Scaffold аутоматски прилагођава визуелни изглед: размаки постају већи (24dp уместо 16dp), боје се прерачунавају из seed боје, а FloatingActionButton добија веће димензије са заобљеним угловима. Истовремено, сва постојећа својства Scaffold-а остају функционална.

Према Material Design 3 Specification (2026), препоручује се коришћење NavigationBar-а са три-пет тачака уместо BottomNavigationBar-а. Scaffold подржава обе варијанте, али NavigationBar пружа бољу подршку за адаптивност и Material You на Pixel уређајима.

Подешавање Scaffold-а за Material 3

За правилан рад Scaffold-а са M3, довољно је ажурирати тему и заменити BottomNavigationBar на NavigationBar. Боје ће бити аутоматски израчунате кроз ColorScheme.fromSeed, а Scaffold ће прилагодити размаке новим стандардима. По потреби, можете директно пребрисати backgroundColor.