AppBar — шта је то, подешавање и Flutter виџети

Шта је AppBar у Flutter-у

AppBar — је стандардна Material компонента горњег панела која се приказује у горњем делу Scaffold-а. Садржи наслов екрана, дугме за навигацију (обично иконица „хамбургер" или стрелица „Назад") и акције — иконице које отварају претрагу, подешавања или друге функције. AppBar се аутоматски прилагођава платформи: на Android-у се користи стандардни Material bottom-shadow, на iOS-у — равнији дизајн са провидношћу.

AppBar имплементира интерфејс PreferredSizeWidget, што значи да је његова висина фиксна и позната пре изградње. Подразумевано, висина AppBar-а износи 56dp на Android-у и 44dp на iOS-у у портретној оријентацији, узимајући у обзир SafeArea на врху. Ова карактеристика омогућава Scaffold-у да унапред израчуна расположиви простор за body, избегавајући прекомпоновку при рендеровању.

Према Flutter Material Library Guide (2026), AppBar је прошао кроз неколико итерација: у Flutter 1.x је био једноставан контејнер са текстом, у Flutter 2.x је добио подршку за Material 3 и flexibleSpace, а у Flutter 3.x — интеграцију са System UI (боја статусне траке, провидност). Модерни AppBar подржава Dynamic Color од Material You на уређајима са Android 12+.

Структура AppBar-а: својства и параметри

AppBar пружа скуп параметара који контролишу сваки део горњег панела. Разумевање ових својстава омогућава флексибилно подешавање панела за било које захтеве дизајна без креирања прилагођених решења.

Title и leading: подешавање наслова и навигације

Својство title прихвата било који виџет, али најчешће се користи Text са подешавањем стила кроз TextStyle. За дугачке наслове препоручује се умотавање title у Flexible како би се текст правилно скратио при недостатку простора. Својство leading се аутоматски замењује са BackButton при преласку на угнежђени екран кроз Navigator.push, ако није експлицитно постављено.

Actions: постављање иконица акција

Листа actions садржи виџете поравнате уз десну ивицу AppBar-а. Сваки елемент не би требало да буде шири од 48dp (стандард Material Design). За груписање акција користите PopupMenuButton — ово скрива мање важне опције у падајућем менију и поштује Material препоруке за густину интерфејса.

Прилагођавање AppBar-а: стилови, боје и понашање

AppBar подржава дубоко прилагођавање кроз својства боје, сенке и маргина. Основни изглед се наслеђује из теме апликације, али свако својство се може појединачно заменити. Размотримо главне сценарије подешавања.

Боја позадине AppBar-а се поставља кроз backgroundColor. Ако није наведена, користи се appBarTheme из ThemeData. У Material 3, боја AppBar-а се аутоматски израчунава из ColorScheme.primary, али се може заменити за одређени екран. За провидни AppBar (често се користи у профилима) поставите backgroundColor: Colors.transparent са elevation: 0.

Својство elevation управља сенком испод AppBar-а. Вредност 0 уклања сенку, стварајући ефекат „равног" панела, што је релевантно за Material 3. Вредност 4 даје стандардну Material Design сенку. За прилагођено управљање сенком користите shadowColor — боју сенке која визуелно одваја панел од садржаја.

За управљање бојом текста у AppBar-у користите foregroundColor. Ово својство утиче на боју наслова, иконица и текста у actions. При промени backgroundColor аутоматски се бира контрастни foregroundColor, али се може принудно поставити за нестандардне дизајне.

SliverAppBar: анимирана верзија AppBar-а

SliverAppBar — је проширење AppBar-а за употребу унутар CustomScrollView-а, које подржава анимацију при скроловању: скупљање (collapsing), паралакс ефекат и закачење (pinned). За разлику од стандардног AppBar-а, SliverAppBar је sliver виџет и може динамички да мења величину у зависности од позиције скроловања.

Главни режими SliverAppBar-а одређују се комбинацијом својстава pinned, floating и snap. У pinned режиму панел увек остаје видљив у горњем делу екрана. У floating режиму појављује се при скроловању уназад. Комбинација floating + snap ствара понашање „лепљивог" панела који излази при најмањем скроловању нагоре, што се често користи у вестима.

Према Flutter API SliverAppBar (2026), за коришћење SliverAppBar-а потребно је заменити обичан ListView или Column са CustomScrollView-ом са sliver виџетима. Scaffold наставља да ради исправно, али својство appBar Scaffold-а мора бити null — SliverAppBar се поставља унутар CustomScrollView-а као први sliver.

Пример подешавања AppBar-а у апликацији

Размотримо пример AppBar-а са претрагом, падајућим менијем и TabBar-ом. Овај код демонстрира типичну конфигурацију горњег панела у продукцијској апликацији на Flutter-у.

Scaffold(
  appBar: AppBar(
    title: const Text('Каталог'),
    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('Подешавања')),
          const PopupMenuItem(value: 'about', child: Text('О апликацији')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

У примеру, AppBar садржи центрирани наслов, дугме за отварање Drawer-а лево, иконицу претраге и падајући мени десно. TabBar у bottom омогућава пребацивање између категорија производа. Ова конфигурација покрива већину сценарија мобилних апликација: навигација, претрага, додатне опције и пребацивање између секција — све у једном горњем панелу.