MaterialApp: یہ کیا ہے اور روٹ widgets کو کیسے سیٹ اپ کریں

Flutter میں MaterialApp کیا ہے؟

MaterialApp ایک ریپر widget ہے جو Flutter ایپلیکیشن میں Material Design کو شروع کرتا ہے۔ یہ Widget Tree کی جڑ ہے اور چائلڈ widgets کو سسٹم سروسز تک رسائی فراہم کرتا ہے: نیویگیشن، تھیم، میڈیا کوریز اور لوکلائزیشن۔ MaterialApp کے بغیر، ایپلیکیشن میں معیاری Material اسٹائل نہیں ہوگا اور یہ Scaffold، AppBar، FloatingActionButton اور BottomNavigationBar جیسے widgets استعمال نہیں کر سکے گی۔

MaterialApp Widget Tree میں کیا شامل کرتا ہے

MaterialApp استعمال کرتے وقت، Flutter خود بخود ٹری کی جڑ میں کئی اہم widgets شامل کرتا ہے: Navigator (نیویگیشن کے لیے اسکرین اسٹیک)، Theme (رنگ سکیم اور اسٹائلز)، MediaQuery (ڈیوائس کی معلومات)، Localizations (مقامی کردہ سٹرنگز)، Directionality (متن کی سمت)۔ یہ widgets InheritedWidget کے طور پر لاگو ہوتے ہیں اور ایپلیکیشن میں کہیں بھی BuildContext کے ذریعے قابل رسائی ہوتے ہیں۔

بنیادی استعمال

MaterialApp کی کم سے کم کنفیگریشن کے لیے صرف home پیرامیٹر درکار ہے — widget جو مرکزی اسکرین پر ظاہر ہوتا ہے۔ Flutter خود بخود home کو Scaffold میں لپیٹ دیتا ہے اگر یہ پہلے سے Scaffold نہیں ہے، WidgetsBinding میکانزم کے ذریعے۔ جب آپ runApp(MaterialApp(home: MyHomePage())) کے ساتھ ایپلیکیشن لانچ کرتے ہیں، تو Flutter MaterialApp کو جڑ کے طور پر ایک روٹ Widget Tree بناتا ہے۔

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

اس مثال میں، MaterialApp بنیادی تھیم (ہلکی اور گہری)، عنوان اور مرکزی اسکرین کو کنفیگر کرتا ہے۔ پیرامیٹر title ونڈو کے عنوان (ڈیسک ٹاپ پر) اور رسائی کے لیے استعمال ہوتا ہے۔ پیرامیٹرز theme اور darkTheme مختلف موڈز میں ایپلیکیشن کی ظاہری شکل کی وضاحت کرتے ہیں۔

MaterialApp کی ساخت اور پیرامیٹرز

MaterialApp 30 سے زیادہ پیرامیٹرز قبول کرتا ہے، جو زمروں میں تقسیم ہوتے ہیں: Material Design ترتیبات، روٹنگ، تھیمنگ، لوکلائزیشن، خرابی کا رویہ اور پلیٹ فارم کے مخصوص پیرامیٹرز۔ کلیدی پیرامیٹرز کو جاننا آپ کو اضافی کوڈ لکھے بغیر ایپلیکیشن کو لچکدار طریقے سے کنفیگر کرنے کی اجازت دیتا ہے۔

بنیادی کنفیگریشن پیرامیٹرز

پیرامیٹر title ونڈو کے عنوان اور رسائی کے لیے ایپلیکیشن کا نام متعین کرتا ہے۔ color Android پر ٹاسک سویچر کے لیے ایپلیکیشن کا رنگ متعین کرتا ہے۔ debugShowCheckedModeBanner ریلیز بلڈ میں ڈیبگ موڈ بینر کو چھپاتا ہے۔ showPerformanceOverlay کارکردگی کی معلومات کے ساتھ ایک اوورلے کو فعال کرتا ہے۔ supportDarkTheme بتاتا ہے کہ آیا ایپلیکیشن ڈارک تھیم کو سپورٹ کرتی ہے۔

پلیٹ فارم کے مخصوص پیرامیٹرز

MaterialApp مختلف پلیٹ فارمز پر رویے کو کنفیگر کرنے کے لیے پیرامیٹرز فراہم کرتا ہے: restorationScopeId Android پر دوبارہ شروع کرنے پر ایپلیکیشن کی حالت کو محفوظ رکھنے کے لیے، scrollBehavior مختلف OS پر اسکرول رویے کو کنفیگر کرنے کے لیے، useMaterial3 Material 3 (Material You) کو فعال کرنے کے لیے۔ Material 3 متحرک رنگ، نئے اجزاء اور اپ ڈیٹ شدہ اسٹائلز شامل کرتا ہے۔

theme اور darkTheme کے ساتھ تھیمنگ

تھیمنگ MaterialApp کے اہم پیرامیٹرز میں سے ایک ہے۔ پیرامیٹر theme ایک ThemeData آبجیکٹ قبول کرتا ہے جو ہلکی تھیم کے لیے رنگ پیلیٹ، نوع ٹائپ، اجزاء کی شکلیں اور آئیکونوگرافی متعین کرتا ہے۔ پیرامیٹر darkTheme گہری تھیم کے لیے مساوی کنفیگریشن ہے۔ Flutter ڈیوائس کی سسٹم ترتیبات کی بنیاد پر خود بخود تھیم تبدیل کرتا ہے۔

ThemeData: رنگ سکیم

ThemeData میں primarySwatch (بنیادی رنگ)، colorScheme (توسیع شدہ Material 3 رنگ سکیم)، brightness (ہلکا یا گہرا)، fontFamily (ڈیفالٹ فونٹ)، textTheme (متن کے اسٹائلز)، cardTheme، appBarTheme، buttonTheme اور مخصوص اجزاء کو حسب ضرورت بنانے کے لیے درجنوں دیگر پیرامیٹرز شامل ہیں۔ Material 3 کے لیے colorScheme اور Material 2 کے لیے primarySwatch استعمال کریں۔

Material 3 متحرک رنگ

Material 3 (Material You) متحرک رنگوں کو سپورٹ کرتا ہے، جو Android 12+ پر ڈیوائس وال پیپر سے نکالے جاتے ہیں۔ انہیں فعال کرنے کے لیے، useMaterial3: true سیٹ کریں اور colorScheme.fromSeed یا colorScheme.fromImageProvider استعمال کریں۔ متحرک رنگ خود بخود 5 ٹونز کا ایک ہم آہنگ پیلیٹ تیار کرتے ہیں: primary، secondary، tertiary، neutral اور neutralVariant۔

widgets میں تھیم تک رسائی

کوئی بھی widget Theme.of(context) کے ذریعے موجودہ تھیم تک رسائی حاصل کر سکتا ہے۔ Theme.of ایک ThemeData آبجیکٹ لوٹاتا ہے جس سے آپ colors، textTheme اور دیگر پیرامیٹرز حاصل کر سکتے ہیں۔ تھیم کی تبدیلیوں کو سبسکرائب کرنے کے لیے (مثال کے طور پر، ہلکے اور گہرے موڈ کے درمیان سوئچ کرتے وقت)، build طریقہ کے اندر کنٹیکسٹ استعمال کریں — Flutter تھیم تبدیل ہونے پر خود بخود widget کو دوبارہ بنائے گا۔

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

اس مثال میں، Theme.of(context) قریب ترین MaterialApp سے موجودہ تھیم حاصل کرتا ہے۔ پس منظر کا رنگ اور متن کا اسٹائل خود بخود موجودہ تھیم (ہلکی یا گہری) سے مماثل ہوتا ہے۔ تھیم تبدیل ہونے پر، Container اور Text اپ ڈیٹ شدہ ThemeData سے نئی قدروں کے ساتھ دوبارہ بنائے جائیں گے۔

MaterialApp میں روٹنگ اور نیویگیشن

MaterialApp Navigator کو مربوط کرتا ہے — ایک اسٹیک پر مبنی نیویگیٹر جو اسکرینوں کے درمیان منتقلی کا انتظام کرتا ہے۔ پیرامیٹرز initialRoute، routes اور onGenerateRoute متعین کرتے ہیں کہ Flutter نیویگیشن کو کیسے ہینڈل کرتا ہے۔ Navigator.push اور Navigator.pushReplacement پروگرام کے ذریعے اسکرین تبدیل کرنے کی اجازت دیتے ہیں، جبکہ Navigator.pop واپس جانے کی اجازت دیتا ہے۔

نامزد راستے (routes)

پیرامیٹر routes ایک Map<String, WidgetBuilder> قبول کرتا ہے، جہاں کلید راستے کا نام (سٹرنگ) ہے اور ویلیو وہ فنکشن ہے جو اس اسکرین کے لیے widget بناتا ہے۔ نامزد راستے جامد نیویگیشن کے لیے آسان ہیں: '/' (روٹ راستہ) عام طور پر home سے مماثل ہوتا ہے، '/settings'، '/profile' — دیگر اسکرینیں۔ Navigator.pushNamed(context, '/settings') سیٹنگز اسکرین پر جاتا ہے۔

راستہ جنریشن (onGenerateRoute)

onGenerateRoute ایک فنکشن ہے جو routes میں راستہ نہ ملنے پر کال کیا جاتا ہے۔ یہ RouteSettings قبول کرتا ہے اور MaterialPageRoute لوٹاتا ہے۔ یہ طریقہ متحرک نیویگیشن کے لیے مفید ہے جب راستے ڈیٹا پر منحصر ہوں (مثال کے طور پر، /user/42)۔ onGenerateRoute راستے کا نام پارس کرتا ہے، پیرامیٹرز نکالتا ہے اور مناسب اسکرین بناتا ہے۔

ڈیپ لنکس اور نامزد روٹنگ

ڈیپ لنکس کو سپورٹ کرنے کے لیے، onGenerateInitialRoute اور onGenerateRoute پیرامیٹرز کو ایک ساتھ استعمال کریں۔ ڈیپ لنکس URL (مثال کے طور پر، https://example.com/promo) کے ذریعے ایپلیکیشن کی مخصوص اسکرین کھولنے کی اجازت دیتے ہیں۔ Flutter Android (intent filters کے ذریعے) اور iOS (universal links کے ذریعے) پر ڈیپ لنکس کو ہینڈل کرتا ہے اور راستہ onGenerateRoute کو بھیجتا ہے۔

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

اس مثال میں، onGenerateRoute /user/42 جیسے متحرک راستوں کو ہینڈل کرتا ہے۔ اگر راستہ جامد routes میں نہیں ملتا اور متحرک پیٹرن سے مماثل نہیں ہوتا، تو Flutter ایک خرابی کا صفحہ دکھاتا ہے، جسے onUnknownRoute کے ذریعے حسب ضرورت بنایا جا سکتا ہے۔

لوکلائزیشن اور بین الاقوامی کاری

MaterialApp پیرامیٹرز localizationsDelegates اور supportedLocales کے ذریعے بلٹ ان لوکلائزیشن سپورٹ فراہم کرتا ہے۔ LocalizationsDelegates مقامی کردہ سٹرنگز لوڈ کرتے ہیں، اور supportedLocales متعین کرتا ہے کہ ایپلیکیشن کن زبانوں کو سپورٹ کرتی ہے۔ Flutter خود بخود ڈیوائس کی زبان کا پتہ لگاتا ہے اور متعلقہ مقامی کردہ وسائل لوڈ کرتا ہے۔

supportedLocales اور localizationsDelegates کی کنفیگریشن

پیرامیٹر supportedLocales Locales کی ایک فہرست قبول کرتا ہے جو ایپلیکیشن سپورٹ کرتی ہے: [const Locale('en'), const Locale('ru'), const Locale('de')]۔ localizationsDelegates ڈیلیگیٹس کی ایک فہرست ہے جو مقامی کردہ سٹرنگز لوڈ کرتے ہیں۔ Material Design کے لیے، GlobalMaterialLocalizations.delegate، GlobalWidgetsLocalizations.delegate اور GlobalCupertinoLocalizations.delegate شامل کریں۔

ایپلیکیشن سٹرنگز کی لوکلائزیشن

اپنی خود کی سٹرنگز کو مقامی بنانے کے لیے، AppLocalizations کلاس استعمال کریں، جو flutter_localizations یا intl پیکیج کے ذریعے بنائی گئی ہے۔ AppLocalizations مقامی کردہ سٹرنگز تک رسائی کے لیے جامد طریقے فراہم کرتا ہے: AppLocalizations.of(context)!.helloMessage۔ MaterialApp خود بخود Localizations کو Widget Tree میں بھیجتا ہے، انہیں کنٹیکسٹ کے ذریعے قابل رسائی بناتا ہے۔

• flutter_localizations — Material widgets اور سسٹم سٹرنگز کو مقامی بنانے کے لیے سرکاری پیکیج۔
• intl — بین الاقوامی کاری کے لیے پیکیج: نمبرز، تاریخوں، کرنسیوں اور جمع کی فارمیٹنگ۔
• ARB فائلیں — مقامی کردہ سٹرنگز کو ذخیرہ کرنے کا فارمیٹ، جو flutter_localizations اور intl استعمال کرتے ہیں۔

MaterialApp بمقابلہ CupertinoApp بمقابلہ WidgetsApp

Flutter مختلف پلیٹ فارمز کے لیے تین روٹ widgets فراہم کرتا ہے: MaterialApp (Android اور ویب کے لیے Material Design)، CupertinoApp (iOS اسٹائل) اور WidgetsApp (اسٹائلنگ کے بغیر بنیادی widget)۔ روٹ widget کا انتخاب پوری ایپلیکیشن کی ظاہری شکل اور پلیٹ فارم کے مخصوص اجزاء کی دستیابی کا تعین کرتا ہے۔

MaterialApp: عالمگیر انتخاب

MaterialApp Material Design سپورٹ کی بدولت زیادہ تر ایپلیکیشنز کے لیے موزوں ہے، جو Android، ویب اور ڈیسک ٹاپ پر بہترین نظر آتا ہے۔ Material Design ایک بھرپور اجزاء کی لائبریری فراہم کرتا ہے: Scaffold، AppBar، BottomNavigationBar، Drawer، SnackBar، Dialog اور بہت سے دیگر۔ MaterialApp متحرک رنگوں کے ساتھ Material 3 کو بھی سپورٹ کرتا ہے۔

CupertinoApp: iOS اسٹائل

CupertinoApp Cupertino Design استعمال کرتا ہے، جو Apple کے Human Interface Guidelines کی پیروی کرتا ہے۔ یہ CupertinoPageScaffold، CupertinoNavigationBar، CupertinoTabBar اور دیگر iOS اسٹائل والے اجزاء فراہم کرتا ہے۔ iOS ایپلیکیشنز یا ان ایپلیکیشنز کے لیے CupertinoApp استعمال کریں جو تمام پلیٹ فارمز پر Apple اسٹائل کی پیروی کرتی ہیں۔

WidgetsApp: کم سے کم جڑ

WidgetsApp اسٹائلنگ کے بغیر بنیادی روٹ widget ہے۔ یہ Navigator، MediaQuery اور Localizations شامل کرتا ہے لیکن تھیمز یا Material/Cupertino اجزاء فراہم نہیں کرتا۔ WidgetsApp حسب ضرورت ڈیزائن سسٹمز، گیمز یا اپنی اسٹائلنگ والی ایپلیکیشنز کے لیے موزوں ہے جہاں Material یا Cupertino ضرورت سے زیادہ ہے۔