Scaffold: یہ کیا ہے، ساخت اور Flutter میں ویجٹس

Flutter میں Scaffold کیا ہے

Scaffold Material Design لائبریری سے ایک لے آؤٹ ویجٹ ہے جو اسکرین کی بنیادی بصری ساخت بناتا ہے۔ یہ معیاری Material ایپلیکیشن پیٹرن نافذ کرتا ہے: اوپر کی بار، اسکرین باڈی، سائڈ مینو اور فلوٹنگ بٹن۔ Container کے برعکس، جو صرف طول و عرض اور اسٹائل سیٹ کرتا ہے، Scaffold پوری اسکرین کو ایک متحد نظام کے طور پر منظم کرتا ہے۔

Material Design کے ساتھ بنائی گئی ہر Flutter ایپلیکیشن MaterialApp سے شروع ہوتی ہے، جس کے اندر ہر اسکرین Scaffold میں لپیٹی جاتی ہے۔ یہ Scaffold ہی ہے جو iPhone X اور اس سے اوپر کے لیے SafeArea کو مدنظر رکھتے ہوئے تمام آلات پر AppBar کی درست نمائش کو یقینی بناتا ہے۔ یہ z ترتیب کے لیے بھی ذمہ دار ہے: Drawer body کے اوپر ظاہر ہوتا ہے، اور SnackBar پورے انٹرفیس کے اوپر لیکن ڈائیلاگ ونڈوز کے نیچے ظاہر ہوتا ہے۔

سرکاری Flutter API حوالہ (2026) کے مطابق، Scaffold SnackBar، BottomSheet اور PersistentBottomSheet جیسے ویجٹس کے صحیح کام کرنے کے لیے ایک لازمی شرط ہے۔ Scaffold کے بغیر، یہ اجزاء ایک استثناء پھینکتے ہیں کیونکہ وہ Scaffold کے سیاق و سباق تک رسائی کے لیے InheritedWidget Scaffold.of پر انحصار کرتے ہیں۔ لہذا، Scaffold کی بجائے براہ راست Container میں کوئی بھی مواد رکھنا ابتدائی ڈویلپرز کی ایک عام غلطی ہے، جو Material فعالیت کے نقصان کا باعث بنتی ہے۔

ویجٹ درجہ بندی میں Scaffold

ایک عام Flutter ایپلیکیشن میں، Scaffold MaterialApp کے اندر واقع ہوتا ہے، عام طور پر کراس پلیٹ فارم ڈویلپمنٹ میں WidgetsApp یا CupertinoApp کے نیچے۔ MaterialApp Navigator اور تھیم بناتا ہے، جبکہ Scaffold موجودہ اسکرین کی ساخت کی وضاحت کرتا ہے۔ ہر اسکرین کا اپنا Scaffold منفرد AppBar، Drawer اور BottomNavigationBar کے ساتھ ہو سکتا ہے، جو کسی خاص صفحے کے لیے انٹرفیس کی لچکدار تخصیص کی اجازت دیتا ہے۔

گہری تخصیص کے لیے، Scaffold کو NestedScrollView کے ساتھ ملایا جا سکتا ہے — یہ پیچیدہ اسکرول اثرات کو نافذ کرنے کی اجازت دیتا ہے، جیسے parallax اثر کے ساتھ سکڑنے والا 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 خصوصیات کے ذریعے توسیعی اینیمیشن کے ساتھ متعدد FABs کو سپورٹ کرتا ہے۔

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) Material Design کا ارتقاء ہے جسے Google نے 2023 میں پیش کیا تھا۔ 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 کو براہ راست اوور رائڈ کیا جا سکتا ہے۔