AppBar — چیست، تنظیمات و ویجت‌های Flutter

AppBar در Flutter چیست

AppBar — یک کامپوننت استاندارد Material پنل بالایی است که در بالای Scaffold نمایش داده می‌شود. این شامل عنوان صفحه، دکمه ناوبری (معمولاً آیکون همبرگری یا فلش «بازگشت») و اقدامات — آیکون‌هایی برای باز کردن جستجو، تنظیمات یا سایر عملکردها است. AppBar به طور خودکار با پلتفرم تطبیق می‌یابد: در اندروید از سایه پایین Material استاندارد و در iOS از طراحی تخت‌تر با شفافیت استفاده می‌کند.

AppBar رابط PreferredSizeWidget را پیاده‌سازی می‌کند، به این معنی که ارتفاع آن ثابت و قبل از ساخت مشخص است. به طور پیش‌فرض، ارتفاع AppBar در اندروید 56dp و در iOS در حالت عمودی 44dp با در نظر گرفتن 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 در دستگاه‌های اندروید 12+ پشتیبانی می‌کند.

ساختار AppBar: ویژگی‌ها و پارامترها

AppBar مجموعه‌ای از پارامترها را ارائه می‌دهد که هر بخش از پنل بالایی را کنترل می‌کنند. درک این ویژگی‌ها امکان تنظیم انعطاف‌پذیر پنل را برای هر نیاز طراحی بدون ایجاد راه‌حل‌های سفارشی فراهم می‌کند.

Title و leading: تنظیم عنوان و ناوبری

ویژگی title هر ویجتی را می‌پذیرد، اما معمولاً از Text با تنظیم سبک از طریق TextStyle استفاده می‌شود. برای عنوان‌های طولانی، توصیه می‌شود title را در Flexible بپیچید تا متن در صورت کمبود جا به درستی بریده شود. ویژگی leading در صورت عدم تعیین صریح، هنگام انتقال به صفحه تو در تو از طریق Navigator.push به طور خودکار با BackButton جایگزین می‌شود.

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 امکان جابجایی بین دسته‌بندی محصولات را فراهم می‌کند. چنین پیکربندی بیشتر سناریوهای برنامه‌های موبایل را پوشش می‌دهد: ناوبری، جستجو، گزینه‌های اضافی و جابجایی بین بخش‌ها — همه در یک پنل بالایی.