AppBar — یہ کیا ہے، ترتیب اور Flutter واجڈٹس

Flutter میں AppBar کیا ہے

AppBar ایک معیاری Material اوپر پینل کمپوننٹ ہے جو Scaffold کے اوپر ظاہر ہوتا ہے۔ اس میں سکرین کا عنوان، ایک نیویگیشن بٹن (عامورا «ہیمبرگر» آئیکن یا «واپس» تیر) اور ایکشنز — آئیکنز جو تلاش، ترتیبات یا دیگر کارکرداریاں کھولتے ہیں۔ AppBar خودکار طور پر پلیٹ فارم کے مطابق حوالة کرتا ہے: Android پر معیاری Material نیچے کا سایہ استعمال کرتا ہے، iOS پر — شفافیت کے ساتھ ایک چپٹا ڈائی زائن۔

AppBar PreferredSizeWidget انٹرفیس نفذ کرتا ہے، جس کا مطلب ہے کہ اسکی اونچائی مقرر ہے اور تعمیر سے پہلے معلوم ہوتی ہے۔ پھلی طرف، پورٹریٹ اوریئنٹیشن میں Android پر 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 Android 12+ آلات پر Material You سے Dynamic Color کی حمایت کرتا ہے۔

AppBar کی ساخت: خوصیات اور پیرامیٹرز

AppBar پیرامیٹرز کا ایک سیٹ فراہم کرتا ہے جو اوپر پینل کے ہر حصے کو کنٹرول کرتے ہیں۔ ان خوصیات کو سمجھنے سے کسٹم حل تیار کیئے بغیر پینل کو کسی بھی ڈائی زائن کی ضرورتوں کے لئے لچیلی طرح سے ترتیب دینے کی اجازت ملتی ہے۔

Title اور leading: عنوان اور نیویگیشن کی ترتیب

title خوصیت کسی بھی واجڈٹ کو قبول کرتی ہے، لیکن سب سے زیادہ TextStyle کے ذریعے انداز ترتیب کے ساتھ Text کا استعمال کیا جاتا ہے۔ لمبے عنوانوں کے لئے، جگہ محدود ہونے پر متن کو صحیح طرح سے منتہا کرنے کے لئے title کو Flexible میں لپیٹنے کی سفارش کی جاتی ہے۔ leading خوصیت واضح طرح سے مقرر نہ کرنے پر Navigator.push کے ذریعے نیسٹڈ سکرین پر جانے پر خودکار طور پر BackButton سے بدل دی جاتی ہے۔

Actions: ایکشن آئیکنز کی جاگہ مقرری

actions فہرست میں AppBar کے دائیں کنارے سطر کیئے گئے واجڈٹس شامل ہیں۔ ہر عنصر 48dp (Material Design معیار) سے زیادہ چوڑا نہیں ہونا چاہیئے۔ ایکشنز کو گروپ کرنے کے لئے، PopupMenuButton استعمال کریں — یہ کم اہم اختیارات کو ایک ڈراپ ڈاؤن مینو میں چھپاتا ہے اور انٹرفیس کثافت کے بارے میں Material کی سفارشات پر عمل کرتا ہے۔

AppBar کسٹمائیزیشن: اسائیل، رنگ اور رویہ

AppBar رنگ، سایہ اور پیڈنگ خوصیات کے ذریعے گھریر کسٹمائیزیشن کی حمایت کرتا ہے۔ بنیادی انداز ایپ ثیم سے موروث ہوتا ہے، لیکن ہر خوصیت کو انفرادی طور پر منسوخ کیا جا سکتا ہے۔ آئیے اهم ترتیب کے مناظر کو دیکھتے ہیں۔

AppBar کا پس منظر رنگ backgroundColor کے ذریعے مقرر کیا جاتا ہے۔ مختص نہ کرنے پر، ThemeData سے appBarTheme استعمال ہوتا ہے۔ Material 3 میں، AppBar کا رنگ خودکار طور پر ColorScheme.primary سے حساب کیا جاتا ہے، لیکن اسے ایک مختص سکرین کے لئے منسوخ کیا جا سکتا ہے۔ شفاف AppBar (اکسر پروفائل میں استعمال ہوتا ہے) کے لئے، elevation: 0 کے ساتھ backgroundColor: Colors.transparent مقرر کریں۔

elevation خوصیت AppBar کے نیچے سایہ کو کنٹرول کرتی ہے۔ قیمت 0 سایہ کو ہٹاتی ہے، “چپٹا” پینل اثر پیدا کرتی ہے، جو Material 3 کے لئے موزوں ہے۔ قیمت 4 معیاری Material Design سایہ دیتی ہے۔ کسٹم سایہ کنٹرول کے لئے، shadowColor استعمال کریں — سایہ کا رنگ جو پینل کو مواد سے بالضابط جدا کرتا ہے۔

AppBar میں متن کے رنگ کو کنٹرول کرنے کے لئے، foregroundColor استعمال کریں۔ یہ خوصیت عنوان، آئیکنز اور actions میں متن کے رنگ کو متاثر کرتی ہے۔ backgroundColor بدلنے پر، ایک متضاد foregroundColor خودکار طور پر منتخب ہوتا ہے، لیکن غیر معیاری ڈائی زائن کے لئے اسے مجبور کیا جا سکتا ہے۔

SliverAppBar: AppBar کا متحرک ورژن

SliverAppBar CustomScrollView کے اندر استعمال کے لئے AppBar کی ایک توسیع ہے جو اسکرول اینیمیشن کی حمایت کرتا ہے: منھصر ہونا، پیرالیکس اثر اور پن موڈ۔ معیاری AppBar کے برعکس، SliverAppBar ایک sliver واجڈٹ ہے اور اسکرول مقام کے اعتماد پر متحرک طور پر حجم بدل سکتا ہے۔

SliverAppBar کے اهم موڈز pinned، floating اور snap خوصیات کے مرکب سے متعین ہوتے ہیں۔ pinned موڈ میں، پینل ہمیشہ سکرین کے اوپر نمائیاں رہتا ہے۔ floating موڈ میں، یہ پیچے اسکرول کرنے پر ظاہر ہوتا ہے۔ floating + snap کا مرکب ایک «چپکنے والے» پینل کا رویہ پیدا کرتا ہے جو تھوڑے سے اوپر اسکرول کرنے پر ظاہر ہوتا ہے، اکسر خبروں کی فیڈ میں استعمال ہوتا ہے۔

Flutter API SliverAppBar (2026) کے مطابق، SliverAppBar استعمال کرنے کے لئے ایک معیاری ListView یا Column کو sliver واجڈٹس پر مشتمل CustomScrollView سے بدلنا ضروری ہے۔ Scaffold صحیح طرح کام کرتا رہتا ہے، لیکن Scaffold کی appBar خوصیت null ہونی چاہیئے — SliverAppBar کو CustomScrollView کے اندر پہلے sliver کے طور پر رکھا جاتا ہے۔

ایپلیکیشن میں AppBar ترتیب کی مصال

آئیے تلاش، ڈراپ ڈاؤن مینو اور TabBar کے ساتھ AppBar کی ایک مصال دیکھتے ہیں۔ یہ کوڈ 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 مصنوعات کے زمروں کے درمیان سوئچ کرنے کی اجازت دیتا ہے۔ یہ ترتیب زیادہ تر موبائل ایپلیکیشن مناظر کو کوٹر کرتا ہے: نیویگیشن، تلاش، اضافی اختیارات اور اجزاء کی سوئچنگ — سب ایک اوپر پینل میں۔