فرنٹ اینڈ ویب ڈویلپرز کے لیے پھڑپھڑانا

میں نے ایک فرنٹ اینڈ ویب ڈویلپر کے طور پر شروع کیا اور پھر ایک بن گیا۔ فلٹر ڈویلپر میرے خیال میں کچھ ایسے تصورات تھے جنہوں نے پھڑپھڑانے کو آسان طریقے سے اپنانے میں میری مدد کی۔ کچھ نئے تصورات بھی تھے جو مختلف تھے۔

اس آرٹیکل میں، میں اپنے تجربے کا اشتراک کرنا چاہتا ہوں اور کسی کو بھی متاثر کرنا چاہتا ہوں کہ ایک ماحولیاتی نظام کو دوسرے کے مقابلے میں منتخب کرنے کے ساتھ مفلوج محسوس ہو رہا ہے یہ دکھا کر کہ تصورات کیسے منتقل ہوتے ہیں اور کوئی بھی نیا تصور سیکھنے کے قابل ہے۔

وہ تصورات جو منتقل ہو گئے۔

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

1. یوزر انٹرفیس (UIs) کو نافذ کرنا

فرنٹ اینڈ ویب میں دیئے گئے UI کو لاگو کرنے کے لیے، آپ HTML عناصر کو کمپوز کرتے ہیں اور انہیں CSS کے ساتھ اسٹائل کرتے ہیں۔ Flutter میں UIs کو نافذ کرنے کے لیے، آپ کمپوز کرتے ہیں۔ ویجٹ اور ان کے ساتھ سٹائل خصوصیات.

سی ایس ایس کی طرح، Color ڈارٹ میں کلاس "rgba" اور "ہیکس" کے ساتھ کام کرتی ہے۔ سی ایس ایس کی طرح، فلٹر اسپیس اور سائز یونٹس کے لیے پکسلز کا استعمال کرتا ہے۔

فلٹر میں، ہمارے پاس تقریباً تمام سی ایس ایس پراپرٹیز اور ان کی اقدار کے لیے ڈارٹ کلاسز اور اینومس ہیں۔ مثال کے طور پر:

پھڑپھڑاہٹ بھی ہے۔ Column اور Row ویجٹ یہ فلٹر کے برابر ہیں۔ display: flex سی ایس ایس میں ترتیب دینے کے لیے justify-content اور align-items طرزیں، آپ استعمال کرتے ہیں۔ MainAxisAlignment اور CrossAxisAlignment خواص ایڈجسٹ کرنے کے لئے flex-grow انداز، متاثرہ بچے (بچوں) کے ویجیٹ کو لپیٹیں۔ Column/Rowایک میں Expanded or Flexible.

اعلی درجے کی UIs کے لیے، Flutter کے پاس ہے۔ CustomPaint کلاس – یہ پھڑپھڑانا کیا ہے Canvas API ویب ڈویلپمنٹ کے لیے ہے۔ CustomPaint آپ کو اپنی مرضی کے مطابق کوئی بھی UI ڈرا کرنے کے لیے ایک پینٹر دیتا ہے۔ آپ عام طور پر استعمال کریں گے۔ CustomPaint جب آپ کوئی ایسی چیز چاہتے ہیں جو واقعی پیچیدہ ہو۔ اس کے علاوہ، CustomPaint جب ویجٹ کا مجموعہ کام نہیں کرتا ہے تو جانے کا راستہ ہے۔

2. ایک سے زیادہ کے لیے ترقی کرنا اسکرین ریزولوشنز

ویب سائٹس براؤزرز پر چلتی ہیں اور موبائل ایپس ڈیوائسز پر چلتی ہیں۔ اس طرح، کسی بھی پلیٹ فارم کے لیے تیار کرتے وقت، آپ کو پلیٹ فارم کو ذہن میں رکھنا ہوگا۔ ہر پلیٹ فارم ایک ہی خصوصیات (کیمرہ، مقام، اطلاعات وغیرہ) کو مختلف طریقوں سے نافذ کرتا ہے۔

ایک ویب ڈویلپر کے طور پر، آپ اپنی ویب سائٹ کے ردعمل کے بارے میں سوچتے ہیں۔ آپ میڈیا کے سوالات کا استعمال کرتے ہیں کہ آپ کی ویب سائٹ چھوٹی اور وسیع اسکرینوں میں کیسی دکھتی ہے۔

موبائل ویب ڈویلپمنٹ سے لے کر فلٹر تک، آپ کے پاس ہے۔ MediaQuery مددگار کلاس. دی MediaQuery کلاس آپ کو موجودہ ڈیوائس فراہم کرتا ہے۔ orientation (زمین کی تزئین یا پورٹریٹ)۔ یہ آپ کو موجودہ ویو پورٹ بھی دیتا ہے۔ size، devicePixelRatio، دیگر ڈیوائس کی معلومات کے درمیان۔ ایک ساتھ، یہ اقدار آپ کو موبائل ڈیوائس کی ترتیب کے بارے میں بصیرت فراہم کرتی ہیں۔ آپ اسے تبدیل کرنے کے لیے استعمال کر سکتے ہیں کہ آپ کی موبائل ایپ مختلف اسکرین سائزز پر کیسی دکھتی ہے۔

3. ڈیبگرز، ایڈیٹرز، اور کمانڈ لائن ٹولز کے ساتھ کام کرنا

ڈیسک ٹاپ براؤزرز میں ڈویلپر ٹولز ہوتے ہیں۔ ان ٹولز میں انسپکٹر، کنسول، نیٹ ورک مانیٹر وغیرہ شامل ہیں۔ یہ ٹولز ویب ڈویلپمنٹ کے عمل کو بہتر بناتے ہیں۔ پھڑپھڑاہٹ بھی اپنی ہوتی ہے۔ دیو ٹولز. اس میں ویجیٹ انسپکٹر، ڈیبگر، نیٹ ورک مانیٹر، دیگر خصوصیات کے علاوہ ہیں۔

IDE سپورٹ بھی اسی طرح کی ہے۔ ویژول اسٹوڈیو کوڈ ویب ڈویلپمنٹ کے لیے سب سے زیادہ مقبول IDE میں سے ایک ہے۔ VS کوڈ کے لیے بہت سے ویب سے متعلقہ ایکسٹینشنز ہیں۔ فلٹر بھی VS کوڈ کو سپورٹ کرتا ہے۔ لہذا منتقلی کے دوران، آپ کو IDE کو تبدیل کرنے کی ضرورت نہیں ہے۔ VS کوڈ کے لیے ڈارٹ اور فلٹر ایکسٹینشنز ہیں۔ فلٹر اینڈرائیڈ اسٹوڈیو کے ساتھ بھی اچھا کام کرتا ہے۔ اینڈرائیڈ اسٹوڈیو اور وی ایس کوڈ دونوں فلٹر ڈیو ٹولز کو سپورٹ کرتے ہیں۔ یہ IDE انضمام فلٹر ٹولنگ کو مکمل بناتے ہیں۔

زیادہ تر فرنٹ اینڈ جاوا اسکرپٹ فریم ورک ان کے ساتھ آتے ہیں۔ کمانڈ لائن انٹرفیس (CLI). مثال کے طور پر: کونیی CLI, React ایپ بنائیں, Vue CLIوغیرہ۔ پھڑپھڑانا بھی ایک خصوصی کے ساتھ آتا ہے۔ CLI. Flutter CLI آپ کو Angular پروجیکٹس بنانے، بنانے اور تیار کرنے کی اجازت دیتا ہے۔ اس میں فلٹر پروجیکٹس کا تجزیہ اور جانچ کرنے کے لیے کمانڈز ہیں۔

تصورات جو نئے تھے۔

یہ سیکشن فلٹر سے متعلق مخصوص تصورات کے بارے میں بات کرتا ہے جو ویب ڈویلپمنٹ میں آسان یا غیر موجود ہیں۔ یہ ان خیالات کی وضاحت کرتا ہے جنہیں آپ Flutter میں داخل ہوتے وقت ذہن میں رکھیں۔

اسکرولنگ کو کیسے ہینڈل کریں۔

ویب کے لیے تیار کرتے وقت، پہلے سے طے شدہ اسکرولنگ رویے کو ویب براؤزرز ہینڈل کرتے ہیں۔ پھر بھی، آپ CSS کے ساتھ اسکرولنگ کو اپنی مرضی کے مطابق کرنے کے لیے آزاد ہیں (استعمال کرتے ہوئے overflow).

فلٹر میں ایسا نہیں ہے۔ ویجیٹ گروپس بطور ڈیفالٹ اسکرول نہیں کرتے ہیں۔ جب آپ کو لگتا ہے کہ ویجیٹ گروپس زیادہ بہہ سکتے ہیں، تو آپ کو فعال طور پر اسکرولنگ کو ترتیب دینا ہوگا۔

پھڑپھڑاہٹ میں، آپ مخصوص وجیٹس کا استعمال کرکے اسکرولنگ کو ترتیب دیتے ہیں جو اسکرولنگ کی اجازت دیتے ہیں۔ مثال کے طور پر: ListView, SingleChildScrollView, CustomScrollViewوغیرہ۔ یہ سکرول ایبل ویجٹ آپ کو اسکرولنگ پر زبردست کنٹرول دیتے ہیں۔ کے ساتھ CustomScrollView، آپ ایپلی کیشن کے اندر ماہر اور پیچیدہ اسکرول میکانزم کو تشکیل دے سکتے ہیں۔

Flutter کی طرف، استعمال کرتے ہوئے ScrollViews ناگزیر ہے. اینڈرائیڈ اور آئی او ایس کے پاس ہے۔ ScrollView اور UIScrollView سکرولنگ کو ہینڈل کرنے کے لئے. پھڑپھڑ کو اس کا استعمال کرکے رینڈرنگ اور ڈویلپر کے تجربے کو یکجا کرنے کا ایک طریقہ درکار ہے۔ ScrollViews، بھی

اس سے دستاویز کے ڈھانچے کے بہاؤ کے بارے میں سوچنے سے روکنے میں مدد مل سکتی ہے اور اس کے بجائے ایپلیکیشن کو آلہ کے مقامی پینٹنگ میکانزم کے لیے کھلے کینوس کے طور پر غور کرنا چاہیے۔

2. اپنے ترقیاتی ماحول کو ترتیب دینا

آسان ترین ویب سائٹ بنانے کے لیے، آپ a کے ساتھ ایک فائل بنا سکتے ہیں۔ .html توسیع کریں اور اسے براؤزر میں کھولیں۔ پھڑپھڑانا اتنا آسان نہیں ہے۔ Flutter استعمال کرنے کے لیے، آپ کو Flutter SDK انسٹال کرنا ہوگا۔ اور فلٹر کو ٹیسٹ ڈیوائس کے لیے ترتیب دیا ہے۔ لہذا اگر آپ اینڈرائیڈ کے لیے فلٹر کوڈ کرنا چاہتے ہیں، تو آپ کو کرنے کی ضرورت ہے۔ Android SDK سیٹ اپ کریں۔. آپ کو کم از کم ایک اینڈرائیڈ ڈیوائس (ایک اینڈرائیڈ ایمولیٹر یا ایک فزیکل ڈیوائس) کنفیگر کرنے کی بھی ضرورت ہوگی۔

ایپل ڈیوائسز (iOS اور macOS) کے لیے بھی یہی معاملہ ہے۔ میک پر فلٹر انسٹال کرنے کے بعد، آپ کو مزید آگے جانے سے پہلے ایکس کوڈ سیٹ اپ کرنے کی ضرورت ہے۔ iOS پر پھڑپھڑانے کی جانچ کرنے کے لیے آپ کو کم از کم ایک iOS سمیلیٹر یا آئی فون کی بھی ضرورت ہوگی۔ ڈیسک ٹاپ کے لیے پھڑپھڑانا بھی کافی سیٹ اپ ہے۔ ونڈوز پر، آپ کو ویژول اسٹوڈیو (VS کوڈ نہیں) کے ساتھ ونڈوز ڈویلپمنٹ SDK سیٹ اپ کرنے کی ضرورت ہے۔ لینکس پر، آپ مزید پیکجز انسٹال کریں گے۔

اضافی سیٹ اپ کے بغیر، فلٹر براؤزرز پر کام کرتا ہے۔ نتیجے کے طور پر، آپ ہدف والے آلات کے لیے اضافی سیٹ اپ کو نظر انداز کر سکتے ہیں۔ زیادہ تر معاملات میں، آپ موبائل ایپ ڈیولپمنٹ کے لیے Flutter استعمال کریں گے۔ لہذا، آپ کم از کم اینڈرائیڈ یا آئی او ایس سیٹ اپ کرنا چاہیں گے۔ پھڑپھڑاہٹ کے ساتھ آتا ہے۔ flutter doctor کمانڈ. یہ کمانڈ آپ کے ڈویلپمنٹ سیٹ اپ کی حیثیت کی اطلاع دیتا ہے۔ اس طرح، آپ جانتے ہیں کہ سیٹ اپ میں، اگر ضرورت ہو تو کس چیز پر کام کرنا ہے۔

اس کا مطلب یہ نہیں ہے کہ فلٹر میں ترقی سست ہے۔ فلٹر ایک طاقتور انجن کے ساتھ آتا ہے۔ دی flutter run کمانڈ کوڈنگ کے دوران ٹیسٹ ڈیوائس پر گرم دوبارہ لوڈ کرنے کی اجازت دیتا ہے۔ لیکن پھر آپ کو دبانے کی ضرورت ہوگی۔ R اصل میں گرم دوبارہ لوڈ کرنے کے لئے. یہ کوئی مسئلہ نہیں ہے۔ فلٹر کے VS کوڈ کی توسیع فائل کی تبدیلیوں پر آٹو ہاٹ دوبارہ لوڈ کی اجازت دیتا ہے۔

3. پیکجنگ اور تعیناتی

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

آج، بہت سے پلیٹ فارمز مفت ہوسٹنگ پیش کرتے ہیں۔

مثال کے طور پر: ڈیجیٹل اوسن پر آپ کو ایک مفت ذیلی ڈومین فراہم کرتا ہے۔ .ondigitalocean.com.

اگر آپ دستاویزات کی ویب سائٹ بنا رہے ہیں تو آپ یہ ڈومین استعمال کر سکتے ہیں۔ جب آپ برانڈنگ کے بارے میں فکر مند نہ ہوں تو آپ انہیں استعمال بھی کر سکتے ہیں۔

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

آپ کو ان میں سے ہر ایک پلیٹ فارم پر ایک ڈویلپر اکاؤنٹ رجسٹر کرنا ہوگا۔ ڈویلپر اکاؤنٹ کو رجسٹر کرنے کے لیے فیس یا سبسکرپشن اور شناخت کی تصدیق کی ضرورت ہوتی ہے۔

ایپ اسٹور کے لیے، آپ کو ایپل ڈویلپر پروگرام کے لیے اندراج کرنا ہوگا۔ آپ کو برقرار رکھنے کی ضرورت ہے۔ $99 کی سالانہ رکنیت. گوگل پلے کے لیے، آپ کو ایک بنانے کی ضرورت ہے۔ ایک وقتی ادائیگی $25 اکاؤنٹ کے لئے.

یہ اسٹورز لائیو ہونے سے پہلے جائزہ لینے والی ہر ایپ کا جائزہ لیتے ہیں۔

یہ بھی ذہن میں رکھیں کہ صارفین آسانی سے ایپ اپ ڈیٹس استعمال نہیں کرتے ہیں۔ صارفین کو واضح طور پر انسٹال کردہ ایپلیکیشنز کو اپ ڈیٹ کرنا چاہیے۔ یہ ویب کے برعکس ہے جہاں ہر کسی کو ویب سائٹ کا تازہ ترین تعینات ورژن دیکھنے کو ملتا ہے۔

تعینات کردہ ایپلیکیشنز کا انتظام تعینات ویب سائٹس کے انتظام کے مقابلے میں نسبتاً زیادہ مطالبہ ہے۔ تاہم، اس سے آپ کو خوفزدہ نہیں ہونا چاہیے۔ بہر حال، یا تو اسٹورز پر لاکھوں ایپس تعینات ہیں تاکہ آپ اپنی بھی شامل کرسکیں۔

پھڑپھڑانے پر اضافی خیالات

Flutter ڈیسک ٹاپ، موبائل، یا ویب ایپلیکیشنز بنانے کے لیے ایک کراس پلیٹ فارم ٹول ہے۔ فلٹر ایپس پکسل پرفیکٹ ہیں۔ ٹارگٹ پلیٹ فارم سے قطع نظر فلٹر ہر ایپ پر ایک ہی UI کو پینٹ کرتا ہے۔ اس کی وجہ یہ ہے کہ ہر فلٹر ایپ میں فلٹر انجن ہوتا ہے۔ یہ انجن فلٹر UI کوڈ پیش کرتا ہے۔ پھڑپھڑ ہر ڈیوائس کے لیے ایک کینوس فراہم کرتا ہے اور آپ کو اپنی مرضی کے مطابق پینٹ کرنے کی اجازت دیتا ہے۔ انجن واقعات اور تعاملات کو سنبھالنے کے لیے ٹارگٹ پلیٹ فارم کے ساتھ بات چیت کرتا ہے۔

پھڑپھڑانا موثر ہے۔ اس میں اعلی کارکردگی کی سطح ہے۔ اس کی وجہ یہ ہے کہ یہ ڈارٹ کے ساتھ بنایا گیا ہے اور یہ ڈارٹ کی خصوصیات کا فائدہ اٹھاتا ہے۔

ان بہت سے فوائد کے ساتھ، فلٹر بہت سے ایپلی کیشنز کے لیے ایک اچھا انتخاب ہے۔ کراس پلیٹ فارم ایپس پیداوار اور دیکھ بھال کے دوران پیسے اور وقت کی بچت کرتی ہیں۔ تاہم، پھڑپھڑانا (اور کراس پلیٹ فارم حل) کچھ معاملات میں ایک بہترین انتخاب نہیں ہو سکتا۔

Flutter کا استعمال نہ کریں اگر آپ چاہتے ہیں کہ صارف آپ کی ایپلیکیشن کے ساتھ پلیٹ فارم ڈویلپر ٹولز استعمال کریں۔ پلیٹ فارم ڈویلپر ٹولز کا یہاں مطلب ڈیوائس کے لیے مخصوص ٹولز جیسے اینڈرائیڈ ڈویلپر کے اختیارات ہیں۔ اس میں براؤزر ڈویلپر ٹولز بھی شامل ہیں۔

اگر آپ توقع کرتے ہیں کہ براؤزر کی توسیع ویب سائٹ کے ساتھ تعامل کرے گی تو ویب کے لیے فلٹر کا استعمال نہ کریں۔

اس کے علاوہ، مواد سے بھری ویب سائٹس کے لیے فلٹر کا استعمال نہ کریں۔

نتیجہ

یہ ان مہارتوں کا جائزہ تھا جو فرنٹ اینڈ ویب ڈویلپمنٹ سے لے کر Flutter کے ساتھ کام کرنے تک ہیں۔ ہم نے ایپ ڈویلپمنٹ کے تصورات پر بھی تبادلہ خیال کیا جو آپ کو بطور ویب ڈویلپر سیکھنا ہے۔

ویب ڈویلپرز کے لیے پھڑپھڑانا آسان ہے کیونکہ ان دونوں میں UIs کو نافذ کرنا شامل ہے۔ اگر آپ Flutter شروع کرتے ہیں، تو آپ کو پتہ چل جائے گا کہ یہ آپ کو ایک اچھا ڈویلپر تجربہ فراہم کرتا ہے۔ فلٹر کو آزمائیں! اسے موبائل ایپس بنانے کے لیے استعمال کریں اور یقیناً، آپ جو کچھ بناتے ہیں اسے دکھائیں۔

واہ!