Scaffold: यह क्या है, संरचना और Flutter में विजेट्स

Flutter में Scaffold क्या है

Scaffold Material Design लाइब्रेरी से एक लेआउट विजेट है जो स्क्रीन की बुनियादी दृश्य संरचना बनाता है। यह मानक Material एप्लिकेशन पैटर्न को लागू करता है: शीर्ष पट्टी, स्क्रीन बॉडी, साइड मेनू और फ्लोटिंग बटन। Container के विपरीत, जो केवल आयाम और शैली सेट करता है, Scaffold पूरी स्क्रीन को एक एकीकृत प्रणाली के रूप में प्रबंधित करता है।

Material Design पर बना हर Flutter एप्लिकेशन MaterialApp से शुरू होता है, जिसके अंदर प्रत्येक स्क्रीन Scaffold में लपेटी जाती है। यह Scaffold ही है जो सभी उपकरणों पर AppBar का सही प्रदर्शन सुनिश्चित करता है, iPhone X और उससे ऊपर के लिए SafeArea को ध्यान में रखते हुए। यह z-क्रम के लिए भी जिम्मेदार है: Drawer body के ऊपर प्रदर्शित होता है, और SnackBar पूरे इंटरफ़ेस के ऊपर, लेकिन डायलॉग विंडो के नीचे दिखाई देता है।

आधिकारिक Flutter API संदर्भ (2026) के अनुसार, SnackBar, BottomSheet और PersistentBottomSheet जैसे विजेट्स के सही संचालन के लिए Scaffold एक अनिवार्य आवश्यकता है। Scaffold के बिना, ये घटक एक अपवाद फेंकते हैं क्योंकि वे Scaffold संदर्भ तक पहुँचने के लिए InheritedWidget Scaffold.of पर निर्भर करते हैं। इसलिए, Scaffold के बजाय सीधे Container में कोई भी सामग्री रखना शुरुआती डेवलपर्स की एक सामान्य गलती है, जिससे Material कार्यक्षमता का नुकसान होता है।

विजेट पदानुक्रम में Scaffold

एक सामान्य Flutter एप्लिकेशन में, Scaffold MaterialApp के अंदर स्थित होता है, आमतौर पर क्रॉस-प्लेटफ़ॉर्म विकास में WidgetsApp या CupertinoApp के नीचे। MaterialApp Navigator और थीम बनाता है, जबकि Scaffold वर्तमान स्क्रीन की संरचना निर्धारित करता है। प्रत्येक स्क्रीन का अपना Scaffold अद्वितीय AppBar, Drawer और BottomNavigationBar के साथ हो सकता है, जो किसी विशिष्ट पृष्ठ के लिए इंटरफ़ेस के लचीले अनुकूलन की अनुमति देता है।

गहन अनुकूलन के लिए, Scaffold को NestedScrollView के साथ जोड़ा जा सकता है — यह जटिल स्क्रॉल प्रभावों को लागू करने की अनुमति देता है, जैसे पैरालैक्स प्रभाव के साथ संकुचित होने वाला AppBar। हालांकि, अधिकांश मामलों में, मानक Scaffold अपने गुणों के साथ प्रोडक्शन-रेडी स्क्रीन बनाने के लिए पर्याप्त है।

Scaffold संरचना: ढांचे के प्रमुख भाग

Scaffold में कई अनिवार्य और वैकल्पिक क्षेत्र होते हैं, प्रत्येक इंटरफ़ेस के एक विशिष्ट भाग के लिए जिम्मेदार होता है। आइए प्रत्येक भाग को अलग-अलग देखें ताकि समझ सकें कि वे एक-दूसरे के साथ कैसे बातचीत करते हैं।

AppBar — शीर्ष पट्टी

AppBar स्क्रीन की शीर्ष पट्टी है जो शीर्षक, नेविगेशन बटन और क्रियाएँ प्रदर्शित करता है। यह स्वचालित रूप से 56dp की सही ऊँचाई प्राप्त करता है और नॉच वाले उपकरणों के लिए SafeArea को ध्यान में रखता है। TabBar को bottom प्रॉपर्टी का उपयोग करके टैब स्विच करने के लिए AppBar में एम्बेड किया जा सकता है।

Drawer — साइड मेनू

Drawer एक पैनल है जो बाएँ से बाहर स्लाइड करता है और एप्लिकेशन के अनुभागों के माध्यम से नेविगेशन प्रदान करता है। यदि drawer प्रॉपर्टी सेट है तो Scaffold स्वचालित रूप से AppBar में एक हैमबर्गर आइकन जोड़ता है। Drawer में DrawerHeader, मेनू आइटम के साथ ListView और उपयोगकर्ता जानकारी हो सकती है।

BottomNavigationBar — निचला नेविगेशन

BottomNavigationBar मुख्य अनुभागों के बीच स्विच करने के लिए स्क्रीन के निचले भाग पर एक पैनल है। इसमें लेबल के साथ 2 से 5 आइकन होते हैं और यह NavigationBar के माध्यम से सक्रिय संकेत के साथ Material 3 का समर्थन करता है। Scaffold इसे स्क्रीन के निचले भाग में रखता है, स्वचालित रूप से body को ऊपर खिसकाता है ताकि सामग्री ओवरलैप न हो।

FloatingActionButton — फ्लोटिंग एक्शन बटन

FloatingActionButton स्क्रीन के निचले दाएँ कोने में रखा गया एक गोल बटन है। इसका उपयोग स्क्रीन पर मुख्य क्रिया के लिए किया जाता है, जैसे नई प्रविष्टि जोड़ना या संदेश भेजना। Scaffold extended गुणों के माध्यम से विस्तारित एनीमेशन के साथ कई FAB का समर्थन करता है।

Body — मुख्य सामग्री

Body स्क्रीन का केंद्रीय क्षेत्र है जहाँ मुख्य सामग्री रखी जाती है। body के रूप में कोई भी विजेट काम कर सकता है: Column, ListView, GridView, Stack या कस्टम संयोजन। Scaffold स्वचालित रूप से AppBar, BottomNavigationBar और SafeArea को ध्यान में रखते हुए body की ऊँचाई की गणना करता है, जो मैन्युअल आकार समायोजन की आवश्यकता को समाप्त करता है।

Scaffold के मुख्य गुण

Scaffold स्क्रीन की उपस्थिति और व्यवहार को अनुकूलित करने के लिए 30 से अधिक गुण प्रदान करता है। इनमें अनिवार्य (body) और वैकल्पिक दोनों शामिल हैं जो मार्जिन, पृष्ठभूमि और कीबोर्ड स्थिति को नियंत्रित करते हैं। प्रत्येक गुण को समझना डिज़ाइन आवश्यकताओं के अनुसार इंटरफ़ेस को सटीक रूप से कॉन्फ़िगर करने में मदद करता है।

resizeToAvoidBottomInset गुण फ़ॉर्म के साथ काम करते समय विशेष रूप से महत्वपूर्ण है: जब यह true (डिफ़ॉल्ट) पर सेट होता है, तो Scaffold कीबोर्ड दिखने पर स्वचालित रूप से body को संकुचित करता है, इनपुट फ़ील्ड को दृश्यमान रखता है। यह कस्टम कीबोर्ड श्रोताओं को लिखने की आवश्यकता को समाप्त करता है। SingleChildScrollView के साथ कस्टम परिदृश्यों के लिए, गुण को अक्षम किया जा सकता है।

एप्लिकेशन में Scaffold के उपयोग का उदाहरण

आइए Material घटकों के पूर्ण सेट के साथ Scaffold का एक व्यावहारिक उदाहरण देखें। कोड 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),
      ),
    );
  }
}

उदाहरण पुराने BottomNavigationBar के बजाय Material 3 से NavigationBar का उपयोग करता है। Scaffold स्वचालित रूप से सभी भागों को जोड़ता है: जब Drawer खुलता है, SnackBar छिप जाता है; टैब स्विच करने पर body अपडेट होता है; और FloatingActionButton अपनी जगह पर रहता है। ScaffoldMessenger पदानुक्रम में कई Scaffold होने पर भी SnackBar प्रदर्शन सुनिश्चित करता है।

Scaffold और Material 3: कॉन्फ़िगरेशन विशेषताएँ

Material 3 (M3) Google द्वारा 2023 में पेश किया गया Material Design का विकास है। M3 में Scaffold को कई बदलाव मिले: BottomNavigationBar के बजाय एक नया NavigationBar विजेट, ColorScheme.fromSeed के माध्यम से डायनामिक कलर के लिए समर्थन और मार्जिन और घटक ऊँचाई के लिए अपडेटेड अनुशंसाएँ। M3 पर स्विच करने के लिए Scaffold को बदलने की आवश्यकता नहीं है — बस एप्लिकेशन थीम अपडेट करें।

किसी प्रोजेक्ट में Material 3 को सक्षम करने के लिए, ThemeData में useMaterial3: true सेट करना आवश्यक है। Scaffold स्वचालित रूप से दृश्य शैली को अनुकूलित करता है: मार्जिन बड़े हो जाते हैं (16dp के बजाय 24dp), रंग बीज रंग से पुनर्गणना किए जाते हैं, और FloatingActionButton गोल कोनों के साथ बड़े आकार प्राप्त करता है। साथ ही, सभी मौजूदा Scaffold गुण कार्यशील रहते हैं।

Material Design 3 विनिर्देश (2026) के अनुसार, BottomNavigationBar के बजाय तीन से पाँच आइटम वाले NavigationBar का उपयोग करने की अनुशंसा की जाती है। Scaffold दोनों विकल्पों का समर्थन करता है, लेकिन NavigationBar Pixel उपकरणों पर अनुकूलनशीलता और Material You के लिए बेहतर समर्थन प्रदान करता है।

Material 3 के लिए Scaffold कॉन्फ़िगर करना

M3 के साथ Scaffold के सही संचालन के लिए, थीम अपडेट करना और BottomNavigationBar को NavigationBar से बदलना पर्याप्त है। रंग स्वचालित रूप से ColorScheme.fromSeed के माध्यम से गणना किए जाएँगे, और Scaffold मार्जिन को नए मानकों में समायोजित करेगा। यदि आवश्यक हो, तो backgroundColor को सीधे ओवरराइड किया जा सकता है।