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 निचले में उत्पाद श्रेणियों के बीच स्विच करने की अनुमति देता है। यह कॉन्फ़िगरेशन अधिकांश मोबाइल एप्लिकेशन परिदृश्यों को कवर करता है: नेविगेशन, सर्च, अतिरिक्त विकल्प और अनुभाग स्विचिंग — सभी एक शीर्ष पैनल में।