گوگل کے فلٹر کے ساتھ کراس پلیٹ فارم موبائل اطلاقات کی تعمیر

Sep 14, 2025
کيسے

سالوں میں متعدد کراس پلیٹ فارم موبائل فریم ورکز موجود ہیں، پورے ترقی کے تجربے اور کارکردگی میں مستقل اصلاحات کے ساتھ. گوگل کی فلٹر پیک کے لئے ایک نیا اضافہ ہے، اور خاص طور پر دلچسپ ہے کیونکہ جاوا اسکرپٹ 'پل' کا استعمال کرنے کے بجائے بہت سے فریم ورک (جیسے ردعمل کی آبادی) کرتے ہیں، یہ حقیقی اصل کوڈ پر مطابقت رکھتا ہے.

آپ اس کے بارے میں تھوڑا سا تلاش کر سکتے ہیں کہ یہ کس طرح ذیل میں تعارفی ویڈیو میں کام کرتا ہے، یا فلٹر کے ساتھ شروع کرنے کے لئے ایک قدم بہ قدم گائیڈ کے لئے پڑھیں. مزید مشورہ کے لئے، وضاحت کرنے والے سبق کے ہمارے مجموعہ پر نظر ڈالیں اے پی پی کی تعمیر کیسے کریں . یا، اگر آپ کسی سائٹ کی تعمیر کر رہے ہیں، تو منتخب کریں ویب سائٹ بلڈر اور ویب میزبانی ہمارے رہنماؤں سے خدمت. آپ کی اسٹوریج سے خوش نہیں؟ یہاں کچھ ہیں کلاؤڈ اسٹوریج اختیارات.

اس سبق میں، ہم کس طرح فلٹر قائم کرنے اور ہماری ترقی کے لئے میکو کا استعمال کرتے ہوئے، فریم ورک کا استعمال کرتے ہوئے فریم ورک کا استعمال کرتے ہوئے، فریم ورک کا استعمال کرتے ہیں. ہم یہ سمجھ لیں گے کہ آپ نے پہلے ہی پروگرام کیا ہے اور جان شیل شیل کا استعمال کیسے کریں، لیکن شاید موبائل کے لئے تیار نہیں ہوسکتا.

01. سیٹ اپ

آپ کو فلٹر کے استعمال سے پہلے کچھ چیزوں کو ڈاؤن لوڈ کرنے اور انسٹال کرنے کی ضرورت ہوگی:

  • iOS کی حمایت کے لئے Xcode.
  • لوڈ، اتارنا Android سپورٹ کے لئے لوڈ، اتارنا Android سٹوڈیو
  • لوڈ، اتارنا Android SDK (آپ کو ایک نئی منصوبہ تخلیق کرنے کے بعد لوڈ، اتارنا Android سٹوڈیو کے ذریعے ڈاؤن لوڈ کریں)

ایک بار جب آپ ان سب کے پاس ہیں تو، Xcode اور لوڈ، اتارنا Android سٹوڈیو چلائیں، اضافی اجزاء انسٹال کرتے ہیں جو وہ پیش کرتے ہیں اور اس بات کا یقین کرنے کے لئے ایک نئی منصوبہ تیار کرتے ہیں.

اب آپ فلٹر کے ساتھ شروع کرنے کے لئے تیار ہیں. ڈاؤن لوڈ، اتارنا فلٹر SDK. . جہاں بھی آپ اسے انسٹال کرنا چاہتے ہیں اسے نکال دیں. ہمیں اپنے راستے کو اپ ڈیٹ کرنے کی ضرورت ہے لہذا MacOs آپ کو اس سے منسلک فلٹر تلاش کر سکتے ہیں. کھولیں (یا تخلیق کریں) $ گھر / .bash_profile. انکار 

sudo atom $HOME/.bash_profile

اب آپ کو فلٹر / بن ڈائرکٹری میں شامل کریں $ راہ انکار 

export PATH=/Users/simon/dev/flutter/bin:$PATH

بش کی پروفائل کو تازہ کرنے کے لئے ایک شیل کمانڈ چلائیں: 

source $HOME/.bash_profile

اب ہم فلٹر کلی کا استعمال شروع کر سکتے ہیں. ایسا کرنے کی پہلی چیز یہ ہے کہ آپ کے پاس تازہ ترین ورژن ہے: 

flutter upgrade

02. کسی بھی مسائل کو حل کریں

ایک بار پھر، فلٹر ایک آسان تشخیصی آلہ پیش کرتا ہے، جو یہ چیک کریں گے کہ آپ کی ضرورت ہر چیز کو انسٹال اور صحیح طریقے سے قائم کیا جائے گا. یہ واقعی مفید ہے: 

flutter doctor

ڈاکٹر آپ کو بتاتا ہے اور اس کے کسی بھی مسئلے کا جواب دینے کا نوٹ لیں. آپ کو اضافی رائے حاصل کرنے اور اس پر عمل کرنے کے لئے آپ کو چند بار ڈاکٹر کو چلانا ہوگا.

ایک بار جب ٹول فلٹر، لوڈ، اتارنا Android ٹولچین، iOS ٹولچین اور لوڈ، اتارنا Android سٹوڈیو کے ساتھ خوش ہے تو، آپ کو جانا اچھا ہے. اب کے لئے منسلک آلات کے بارے میں فکر مت کرو.

Xcode اس کو مکمل طور پر قائم کرنے کے لئے شیل پر کچھ اضافی اقدامات کی ضرورت ہوسکتی ہے: 

 سڈو Xcode- منتخب کریں - SoWitch /applications/xcode.app/contents/developer.App
برائی انسٹال - ہیڈ Libimobiledevice.
iDeviceinstaller انسٹال کریں
کوکوپوڈ انسٹال کریں
پوڈ سیٹ اپ

اور لوڈ، اتارنا Android سٹوڈیو اکثر لائسنس کے معاہدے کو قبول کرنے کی ضرورت ہے: 

 فلٹر ڈاکٹر - لوڈروڈ لائسنس

03. ایک IDE تلاش کریں اور نئی منصوبے شروع کریں

اب فلٹر قائم کیا گیا ہے، آپ کو کام کرنے کے لئے ایک IDE کرنا چاہتے ہیں. لوڈ، اتارنا Android سٹوڈیو اور Intellij کے لئے دستیاب پلگ ان ہیں. ہم وی ایس کوڈ کے ساتھ جانے جا رہے ہیں، جس میں اس کے اپنے فلٹر پلگ ان بھی ہیں.

VS کوڈ شروع کریں اور دیکھیں اور GT پر کلک کریں؛ کمانڈ پیلیٹ. ٹائپ کریں 'انسٹال کریں' اور توسیع کا انتخاب کریں: توسیع کی کارروائی انسٹال کریں. 'فلٹر' کے لئے تلاش کریں اور فلٹر پلگ ان انسٹال کریں. ایک بار پھر، VS کوڈ کو دوبارہ شروع کریں.

اب ہم ترقی پذیر شروع کرنے کے لئے تیار ہیں. فلٹر کا انتخاب کرکے کمانڈ پیلیٹ کے ذریعہ ایک نئی منصوبہ شروع کریں: نیا پروجیکٹ کا اختیار. اپنے منصوبے کا نام، اسے بچانے کے لئے منتخب کریں اور VS کوڈ کو نئے منصوبے کو پیدا کرنے کے لئے فلٹر کو مدعو کرے گا.

04. مجازی آلات قائم کریں

ہمارے منصوبے کی جانچ کرنے کے لئے، ہم ایک ڈیوائس سمیلیٹر چاہتے ہیں کہ ہمیں ڈیسک ٹاپ پر اجازت دیں. وی ایس کوڈ (نیلے بار میں) کے نچلے دائیں ہاتھ کونے میں، آپ کو کچھ آلات نہیں کہہلیں گے. اگر آپ اس سے پہلے موبائل کے لئے تیار ہیں تو، جب آپ اس پر کلک کریں تو، آپ کمانڈ پیلیٹ میں دستیاب سمیلیٹر دیکھیں گے.

اگر آپ کے پاس کوئی سمیلیٹر نہیں ہے تو، ٹرمینل میں مندرجہ ذیل چلائیں کہ iOS سمیلیٹر کو پہلی بار کھولیں: 

 اوپن-اے سمیلیٹر

جب آپ VS کوڈ دوبارہ شروع کرتے ہیں تو آپ کو iOS سمیلیٹر دستیاب ہونا چاہئے.

لوڈ، اتارنا Android زیادہ پیچیدہ ہے. لوڈ، اتارنا Android سٹوڈیو لوڈ کریں اور ایک لوڈ، اتارنا Android منصوبے کے اندر، ٹولز اور GT پر کلک کریں؛ لوڈ، اتارنا Android اور GT؛ AVD مینیجر. مجازی آلہ بنائیں.

آلہ کو جذب کرنے کے لئے منتخب کریں - مثال کے طور پر ایک گوگل پکسل 2. اگلا پر کلک کریں اور آپ کو ڈاؤن لوڈ کرنے کے لئے ایک سسٹم کی تصویر (i.e OS ورژن) بھی منتخب کر سکتے ہیں. اگلے صفحے پر جذب کردہ کارکردگی کے تحت، ہارڈویئر پر ہارڈ ویئر گرافکس کو فعال کرنے کیلئے ہارڈ ویئر - GLES 2.0 کو منتخب کریں. عمل ختم کرو.

ایک بار جب آپ نے لوڈ، اتارنا Android سٹوڈیو میں مجازی آلہ بنایا ہے، VS کوڈ کو دوبارہ شروع کریں اور آپ دیکھیں گے کہ آپ کے Android ایمولیٹر VS کوڈ کی ڈیوائس کی فہرست میں iOS سمیلیٹر کے ساتھ ظاہر ہوتے ہیں.

اب، اگر آپ کوئی آلات پر کلک نہیں کرتے ہیں، تو آپ iOS یا لوڈ، اتارنا Android ڈیوائس منتخب کرسکتے ہیں اور ایک مجازی فون آپ کے ڈیسک ٹاپ پر آگ لگیں گے. آئی فون ایکس سمیلیٹر کے ساتھ اسے آزمائیں.

04. سٹارٹر اپلی کیشن کی جانچ

اب سمیلیٹر چل رہا ہے، آپ سٹارٹر اے پی پی کی جانچ کر سکتے ہیں. F5 مارو یا ڈیبگ اور جی ٹی پر کلک کریں؛ ڈیبگنگ شروع کریں. اے پی پی سمیلیٹر پر لوڈ کرے گا اور آپ اس کے ساتھ بات چیت کرنے کی کوشش کر سکتے ہیں. مریض رہو اگر یہ فوری طور پر نہیں ہوتا، کیونکہ یہ تعمیر کرنے کے لئے کچھ وقت لگ سکتا ہے.

اس سے پہلے کہ ہم لوڈ، اتارنا Android پر اسی طرح کر سکتے ہیں، ہمیں اپنے منصوبے کے لئے گریجل انحصار کو انسٹال کرنے کی ضرورت ہے (ابھی فلٹر کا ایک چھوٹا سا نرس). پروجیکٹ جڑ ڈائرکٹری پر جائیں اور چلائیں: 

 لوڈ، اتارنا Android / Gradlew

اس کے بعد آپ ایک Android ایمولیٹر کھول سکتے ہیں اور اس منصوبے کو ڈیبگ موڈ میں چلاتے ہیں جیسا کہ آپ نے iOS کے لئے کیا تھا.

فلٹر کی ایک بڑی خصوصیت یہ ہے کہ یہ 'گرم دوبارہ لوڈنگ' کی حمایت کرتا ہے - یہ ہے کہ، آپ اپنے ذریعہ میں ترمیم کرسکتے ہیں اور ابھی تک سمیلیٹر میں نظر آتے ہیں. میں مین ڈاٹٹ آئی فون ایکس سمیلیٹر چلتا ہے جبکہ، مائی ایپ کلاس میں ایک جوڑے کو تبدیلیاں کرتے ہیں. 

 پرائمری سوئچ: رنگ. گرین،
ہوم: نیا MyHomePage (عنوان: 'ہدایت کتاب')، =

جیسے ہی آپ کو بچانے کے لۓ آپ کو تبدیلیوں کا اثر پڑتا ہے.

06. فلٹر کی ویجیٹ سسٹم کو تلاش کریں

ہم نے ابھی تک ابھی تک بات چیت نہیں کی ہے کہ ڈارٹ پروگرامنگ کی زبان ہے جو فلٹر استعمال کرتا ہے. ڈارٹ Google اور تمام فلٹر کی ترقی کی طرف سے تیار کردہ سی طرز نحو کے ساتھ ایک اعتراض پر مبنی زبان ہے. اگر آپ نے پہلے ہی ویب یا موبائل ترقی کا کچھ تجربہ حاصل کیا ہے، تو یہ آپ کو مکمل طور پر اجنبی نہیں ہونا چاہئے.

فلٹر میں سب کچھ ویجٹ پر مبنی ہے، جو ایک اپلی کیشن عمارت کے بلاکس ہیں. اگر آپ نے پہلے رد عمل کا استعمال کیا ہے تو، فلٹر کا نقطہ نظر بہت ہی اسی طرح کی اسی طرح کی ہے اور ویجٹ اجزاء کے مطابق ہیں. لازمی طور پر آپ کے پورے ایپ ویجٹ کے ایک تنظیمی ڈھانچے میں تقسیم کیا جا سکتا ہے.

یہ آسانی سے اندر اندر دیکھا جاتا ہے MyApp. کلاس. MyApp. ایک ھے StatexWidget. (اس کا مطلب یہ ہے کہ یہ ناقابل اعتماد ہے). The. تعمیر () ہم طریقہ ہم ختم کر رہے ہیں فلٹر کو کس طرح ویجیٹ فراہم کی جانی چاہئے. یہ ردعمل کی طرح ہے رینڈر () فنکشن

طریقہ واپسی A. MATERAPEAP. ویجیٹ، جو ایک ایپ کی نمائندگی کرتا ہے جو Google کے مواد کے ڈیزائن کا استعمال کرتا ہے. اس کے نتیجے میں کئی خصوصیات ہیں، جو خود کو ویجٹ ہیں: TheEDATA استعمال کرنے کے لئے بصری سٹائل کی وضاحت کرتا ہے Myhomepage. کیا ایک اپنی مرضی کے مطابق ویجیٹ کی وضاحت کی گئی ہے مین ڈاٹٹ فائل جس میں ایپ کے جسم پر مشتمل ہے.

07. اپنے مواد میں ترمیم کریں

بے شمار کے برعکس MyApp. ، Myhomepage. ایک سرکاری ویجیٹ ہے. اس کا مطلب یہ ہے کہ اس کے رویے کی طرف سے وضاحت کی گئی ہے _myhomepagestate. کلاس، معلومات کو ذخیرہ کرنے اور اس کے مطابق تبدیل کرنے کے قابل بناتا ہے، جیسے کہ آپ ایپ پر بٹن دبائیں.

آپ دیکھ سکتے ہیں کہ اس وقت بہت سے بلٹ میں ویجٹ فلٹر کا استعمال کرتے ہوئے عام چیزوں کو ترتیب، بٹن اور ٹیکسٹ ڈسپلے کو ہینڈل کرنے کے لئے فراہم کرتا ہے. چلو اس طبقے میں کچھ تبدیلیاں کرتے ہیں جو ہمارے اپلی کیشن کو پیش کرتے ہیں. 

 کلاس _MYHOUMEPAGETATE ریاستی & lt؛ myhomepage & gt؛ {
 Averride.
 ویجیٹ کی تعمیر (buildcontext سیاق و سباق) {
   نئی چوڑائی واپس لو (
     اپلی کیشن: نیا اپلی کیشن (
       عنوان: نیا متن (ویجیٹ. title)،
     )،
     جسم: نیا کنٹینر (
       سجاوٹ: نیا boxdecation (رنگین: رنگ. براؤن 
)،
       چائلڈ: نیا rectywewidget ()
     )
   )؛
 }
}

ہم نے موجودہ مواد سے خارج کر دیا اور اسے بھوری کنٹینر ویجیٹ کے ساتھ تبدیل کر دیا لیکن ہمیں اپنی مرضی کے مطابق ویجیٹ بنانے کے لئے بھی ضرورت ہے، اس کے کنٹینر میں ڈال دیا جائے گا. 

 کلاس Recovewegetget statelesswidget {
 Averride.
 ویجیٹ کی تعمیر (buildcontext سیاق و سباق) {
   فہرست اور ایل ٹی؛ ویجیٹ اور جی ٹی؛ وگیٹس = نئی فہرست اور ایل ٹی؛ ویجیٹ اور جی ٹی؛ ()؛
   نئی فہرست دیکھیں (بچوں: ویجٹ)؛
 }
}

08. کچھ اثاثوں کو لوڈ کریں

اگلا، چلو اپلی کیشن کے ساتھ کچھ اثاثوں کو لوڈ کریں تاکہ ہم ان کو شامل کریں فہرست دیکھیں اندر ویجیٹ RecoveBidgetget. . اے پی پی کے لئے جامد اثاثوں میں بیان کیا گیا ہے pubspec.yaml. 'فلٹر' سیکشن کے تحت: 

 اثاثوں:
   - آئی ایم جی / ناشتا. jpg.
   - img / curry.jpg.
   - IMG / PASTA.JPG

ہم مین. ڈاٹٹ میں ایک سادہ ڈیٹا ڈھانچہ بھی تشکیل دیں گے. 

 var کی ترکیبیں = {
   'ناشتا. jpg': 'اس غذائی ناشتا کے ساتھ دن کا آغاز کریں.'
   'passa.jpg': 'آپ کے اپنے دوستوں کو اپنے اپنے تازہ پاستا بنانے کے ذریعے واہ.'
   'curry.jpg': 'اپنے پاک مہارت کو ایک امیر کیری کے ساتھ دکھائیں.'
}؛

09. ختم

آخر میں، چلو اپ ڈیٹ کریں RecoveBidgetget. کی ترکیبیں ظاہر کرنے والی ویجٹ کی ایک فہرست کی تعمیر کے لئے. ہم استعمال کرتے ہیں image.asset.Asset. جامد اثاثوں کو لوڈ کرنے کے لئے ہم میں شامل ہیں pubspec.yaml. . 

 ترکیبیں. فورچ ((انگوٹھے، کیپشن) = & gt؛ jidgets.add (
       نیا کنٹینر (بچے:
         نئی بھرتی (پڈنگنگ:
           نیا Edgeinsets.all (16.0)، بچے:
             نئی فہرست (
               قیادت: تصویری .اسیٹ ('img /' + انگوٹھے، چوڑائی: 80.0)،
               عنوان: متن (کیپشن)
             )
           )،
           سجاوٹ:
             نیا boxdecation (
                 سرحد: نئی سرحد (
                     نیچے: نئی borderside (رنگین: رنگ. براؤن)
                 )،
                 رنگین: رنگ. براؤن 

             )
       )
     )
)؛

امید ہے کہ آپ کو ایک احساس حاصل کرنے کے لئے شروع ہو رہا ہے کہ کس طرح فلٹر اپلی کیشنز کی تعمیر کے لئے ویجٹ استعمال کرتا ہے. آلہ کو گھومنے کے لئے سمیلیٹر کا استعمال کرتے ہوئے کوشش کریں. فلٹر ترتیب خود بخود تبدیلیوں کو ایڈجسٹ کرتا ہے. مقابلے کے لئے، لوڈ، اتارنا Android ایمولیٹر پر اپلی کیشن کی کوشش کریں.

یہ مضمون اصل میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. خریدنے مسئلہ 310. یا سبسکرائب .

مزید پڑھ:

  • ان پانچ عوامل کے ساتھ اپنے سر کے ارد گرد رد عمل کریں
  • ڈیزائنرز کے لئے 11 تخلیقی مفت آئی فون اطلاقات
  • اپلی کیشن شبیہیں کیسے بنائیں

کيسے - انتہائی مشہور مضامین

اپنے Smugmug Storefront سیٹ اپ اور کس طرح قائم کرنے کے لئے

کيسے Sep 14, 2025

(تصویری کریڈٹ: پیکسیلوں پر آندری Furtado) ایک سادہ ویب سائٹ بلڈر جو ب�..

فوٹوشاپ میں ایک پرت پلٹائیں: ایک مکمل گائیڈ

کيسے Sep 14, 2025

ڈبل دیکھنا یہ تصویر اصل کے ساتھ فلپ اور مرکب کیا گیا ہے (تصویری کریڈ�..

SASS کا استعمال کرتے ہوئے سٹائل ایک سائٹ

کيسے Sep 14, 2025

آپ سی ایس ایس کے ساتھ بہت کچھ کر سکتے ہیں - شاید آپ سے زیادہ سوچ سکتے ہیں -..

ایک متحرک بھاپ ٹیکسٹ اثر بنائیں

کيسے Sep 14, 2025

متن میں اثرات شامل کرنے میں مصروفیت اور دلچسپی کا ایک مکمل نئی سطح شامل ..

سی ایس ایس گرڈ کے ساتھ فیشن لچکدار ترتیب

کيسے Sep 14, 2025

سی ایس ایس گرڈ قطاروں اور کالموں کے دو محور لے آؤٹ بنانے کے لئے بہترین ہ�..

سی ایس ایس کے سائز کے ساتھ حیرت انگیز اثرات کیسے بنائیں

کيسے Sep 14, 2025

فرنٹ اینڈ ڈویلپرز آئتاکاروں میں سوچتے ہیں؛ آئتاکاروں کے اندر آئتاکارو�..

سی ایس ایس کے ساتھ حرکت پذیری کا استعمال کرتے ہوئے اپنے مینو کو پاور بنائیں

کيسے Sep 14, 2025

یہ حرکت پذیری کے ذریعہ ہے کہ ہم دنیا کا احساس کرتے ہیں: دروازے کھولنے کے ..

10 اوپر Houdini سبق

کيسے Sep 14, 2025

Houdini ایک طاقتور جانور ہے، بہت سے ہالی وڈ فلموں میں استعمال ہونے والی VFX کی تعمیر کے اوزار کے ساتھ. لیکن ابتد..

اقسام