уσυ нανє тσ ℓєαяη нσω тσ ƒιgнт αℓσηє! ?
نویگیشن به روش حرفه ای ها در اپ های فلاتری
سلام به همه فلاتری های عزیز امیدوارم که حالتون خوب باشه و گردل هاتون بدون هیچ مشکلی براتون خروجی بگیرن
قرار تو این مقاله راجع به یه روش دیگه از نویگیشن صحبت کنیم که خیلی فرق داره با بقیه نویگیشن ها اگه میخوایی بدونی این روش چیه تا آخر این مقاله با دقت بخون که اشتباه نکنی و یادت نره تمرین و استقاده کنی
نویگیشن ها می توانند به دو صورت انجام شوند ، مسیر های نام گذاری شده (NAMED ROUTES)یا با پوش کردن مسیر ها به صورت مستقیم (pushing Routes explicitly)با نمونه سازی از صفحه قرار است به ان مراجعه کنیم وبا پاس دادن ان به Navigatorپوش کردن این مسیر ها میتواند گیج کننده باشد و اشتراک گذاری اطلاعات بین ها سخت بشود یا منطق ها مانند چک کردن اینکه ایا یوزر احراز هویت شده است یا خیر برای نشان دادن ویو های مختلف با ان میتواند سخت شود ، در این پست ما به ستاپ کردن مسیر (Route) برای فلاتر خواهیم پرداخت که فلاتر چگونه به ما اجازه میدهد که named Routes استفاده کنیم و بتوانیم بین انها اطلاعات جابجا کنیم و این کار ها با یه پارامتر که این قابلیت ها را داراست انجام میدهیم خیلی از نظر استراکچر و معماری به ما کمک میکند
دیگه بریم سراغ کد و حرف زدن بسه :)
ما 2 ویو خواهیم ساخت تا بتونیم با انها کار کنیم و شما حتی می توانید اان ها را در فایل main دارت خود قرار بدهید
بریم برای نوشتن مسیر ها و ادامه کار...
متریال اپ برای شما یه پارامتری به نام onGenrateRouteفراهم میکند که جایی است که شما یه فانکش بهش میدهید مقدار بازگشتی از این فانکشن ازنوع Route<dynamic> می باشد و یک routeSetting میگیرد این همان چیزی است که استفاده خواهیم کرد از ان تا کد های ما تمیز بماند و برای این منظور ما یه کلاس به نام Routeخواهیم ساخت و داخل ان یک فانکشن استاتیک میسازیم تا بتوانیم بدون نمونه سازی به این فانکشن دست رسی داشته باشیم و کار های را که در بالا گفتیم در یه فایل جداگانه به نام router میریزیم به عکس نگاه کنید :
تنضیمات موجود که شامل اطلاعات مسیر های درخواست شده میشود و ان برای ما 2 کلید فراهم خواهد کرد ، اسم یا nameو ارگومان های ان. ما استفاده خواهیم کرد از این نام ها تا مشخص کنیم کدام ویو به کدام اسم ربط دارد تا انرا برایمان برگرداند , همانطور که میبینید این تنظیمات تو ورودی فانکشن نوشته شده , فانکشن بالا را مطابق کد زیر اپدیت کنید
در این قسمت منظور ما از استفاده از name به همراه مقدار "/" چیست؟ زمانی که اسم ما برابر با این مقدار میشود صفحه اصلی را نشان خواهد داد و زمانی کهfeed/بشود به ما صفحه feed را نشان خواهد داد و برای جلوگیری از هرگونه اشتباه تایپی و باگ بهتر از نام صفحات را در فایل کانستنت خود به روش زیر بنویسید تا همه جا مورد استفاده باشد و بدور از اشتباه باشد
و حالا سویچ هایی که نوشته بودیم را طبق کد زیر اپدیت کنید تا بتوانید از اون متغییر ها استفاده کنیم
حالا وقت ان است که تو اپ خودمان مشخص کنیم که ان فانکشم کجا هست و باید به کدام پارامتر بدیم این پارامتر در متریال اپ هست که نام فانکشن را به پارامتر onGenratedRoute پاس میدهیم و مشخص میکنیم که صفحه اصلی اپ ما کدام صفحه است و برای این کار به جای ست کردن home در متریال اپ ان را به پروپرتی میدهیم و نام ان initalRouteاست.
حالا به یکی دیگه از مهم ترین بخش های این مقاله میرسیم
و حالا وقتی است که بین صفحات جابجا بشوید و فقط شما این را به این شکل مینویسید
این شما را به ویو feed میبرد و اگر خواستید که مقادیر یا پارامتر هایی به این ویو هنگام جابجایی پاس بدهید باید یه تغییر ریز بدید تا بتوانید موارد را جابجا کنید به عنوان مثال اینجا کلاس feed یه مقدار استرینگ کوچکی میگیرد به عنوان پارامتر کاسنتراکتور که کد های ما به این شکل در می اید هدف ما این است که یه فلوتینگ اکشن باتن بزاریم تا با ان به این صفحه feed از homeجابجا شویم و یک مقداری را به این صفه منتقل کنیم کلاس feed ما به شکل زیر قرار میگیرد
فلوتینگ اکشن باتن را را به هوم پیج می افزاییم و و در روی onpressed ما نویگیشن خود را فرا میخوانیم و دیتا را به صورت زیر پاس میدهیم (این داده هر نوعی از دیتا تایپ ها میتوند باشد )
حالا به سراغ ان تنضیمات میرویم و باید ضمینه دریافت اطلاعات ارسالی را فراهم کنیم و ان دیتا دریافتی را به کانستراکتور کلاس feed بدهیم و کار را تمام کنیم
مانند عکس زیر میتوانید دیتا را دریافت کنید یادتون بمونه که همه نوعی ارسال میتونید بکنید فقط کست(cast)ان فراموش نکنید
حالا با زدن اون دکمه اون مقدار به صفحه دیگه سند میشه:)...
اگه از این مقالعه خوشتون اومد حتمی لایک کنید و با نظراتتون و با اشتراک گذاری این مقاله بهم دل گرمی بدین تا هرهفته یه دونه مقاله کاربردی براتون بنویسم و یا حتی اگه مقاله خارجی در نظر داشتید برام تو کامنت ها لینکش رو بزارید تا براتون به فارسیش اینجا بزارم
تا مقاله ای دیگه خدا نکهدار
مطلبی دیگر از این انتشارات
flutter bottom_navigation_bar
مطلبی دیگر از این انتشارات
نحوه کار با مپ باکس و فلاتر مپ (ویرایش 12 آبان 1402)
مطلبی دیگر از این انتشارات
راه اندازی deep link در فلاتر