آشنایی با Flutter Navigator 2. 0

این آموزش Flutter Navigator 2. 0 فرض می کند که شما دانش کاری در مورد دارت و فلاتر دارید.

ناوبری یک مفهوم اصلی در توسعه اپلیکیشن موبایل است. به کاربران امکان می دهد از یک صفحه به صفحه دیگر حرکت کنند. ناوبری با مدیریت خوب برنامه شما را مرتب نگه می دارد و قابلیت های آن را افزایش می دهد.

Flutter یک API ضروری (Navigator 1. 0) و یک API اعلامی (Navigator 2. 0) مکانیسم مسیریابی را ارائه می دهد. در Navigator 1. 0، فقط می توانید یک صفحه را به بالای پشته ناوبری اضافه کنید و بالاترین مسیر را حذف کنید. از سوی دیگر، مکانیسم اعلامی به شما اجازه می دهد تا پشته ناوبری را به طور کامل کنترل کنید.

در این مقاله، نحوه تنظیم پشته تاریخچه ناوبری را به صورت اعلامی یاد خواهید گرفت. شما یاد خواهید گرفت که چگونه:

این مقاله توسط Ivy Walobwa نوشته شده است

Navigator 2. 0

Navigator 2. 0 مرجع استاندارد برای ناوبری اعلامی است و جایگزین Navigator 1. 0 نمی شود، زیرا می توانید آنها را با هم استفاده کنید.

Navigator 2. 0 یک طراحی API اعلامی جدید، Pages را برای ویجت Navigator موجود ارائه می دهد. همچنین یک ویجت جدید روتر را معرفی می کند.

ما روی یک برنامه لیست فروشگاه با سه صفحه کار خواهیم کرد. همانطور که در اینجا نشان داده شده است، به ناوبری اجازه می دهد:

کار با صفحات

Pages API پشته تاریخچه Navigator را با در نظر گرفتن لیستی از اشیاء Page به صورت اعلامی تنظیم می کند. سپس Navigator اشیاء Page را به اشیاء Route تبدیل می کند. ترتیب مسیرها با ترتیب صفحات در لیست ارائه شده مطابقت دارد.

هنگامی که لیست اشیاء Page تغییر می کند، لیست جدید با لیست قدیمی مقایسه می شود و پشته به درستی به روز می شود.

علاوه بر لیستی از اشیاء Page، Navigator موارد زیر را نیز در نظر می گیرد:

• یک پاسخ تماس onPopPage که به Navigator اجازه می دهد تا یک صفحه را باز کند. فقط برای بالاترین صفحه نامیده می شود.
• TransitionDelegate که نحوه انتقال مسیرها بر روی صفحه یا خارج از صفحه را تعیین می کند. نماینده پیش فرض یک اثر گذار مانند فشار را پیاده سازی می کند.

بیایید آن را امتحان کنیم!

ویجت Navigator را اضافه کنید

ابتدا، مانند شکل زیر، ویجت Navigator را به ویجت MaterialApp خود اضافه می کنید:

پاسخ به تماس onPopPage مورد نیاز است. در این آموزش از نماینده انتقال پیش فرض استفاده خواهید کرد.

صفحه اول را به پشته اضافه کنید

بعد، صفحه اول را به پشته تاریخ اضافه می کنید. هنگامی که برنامه شما برای اولین بار راه اندازی شد، این صفحه قابل مشاهده خواهد بود.

اجرای برنامه شما، ItemListScreen را مانند شکل زیر نمایش می دهد:

وضعیت برنامه را اضافه کنید

سپس حالت را به برنامه خود اضافه خواهید کرد. می توانید روش ها و پرچم هایی را برای به روزرسانی پشته ناوبری به دلخواه اضافه کنید.

کد بالا کارهای زیر را انجام می دهد:

• سه پرچم را به حالت برنامه اضافه می کند: _SelectedItem ، _selectedRoute و Show404.
• یک روش _handleitemtapped اضافه می کند: این زمانی خوانده می شود که کاربر روی یک مورد در لیست قرار می گیرد و ویژگی _selectedItem را به روز می کند.
• یک روش _handleroutetapped اضافه می کند: این وقتی کاربر به صفحه دیگری منتقل می شود که نیازی به داده های موردی ندارد و ویژگی های _selectedItem و _selectedRoute را به روز می کند ، این روش فراخوانی می شود.
• برای استفاده از دو روش مورد نیاز: onitemtapped و onRoutetapped ، لیست موارد مورد نظر را اصلاح می کند.

صفحات را اضافه کنید

اکنون که وضعیت برنامه مورد نیاز را دارید ، می توانید علاوه بر این و حذف صفحات از پشته تاریخ ، همانطور که در زیر آمده است:

قطعه کد در بالا به طور مشروط ، اشیاء صفحه را از پشته تاریخ بر اساس مقدار _selectedRoute ، _selectedItem و ویژگی های Show404 اضافه و حذف می کند.

پاسخ به تماس OnPoppage وضعیت برنامه را به روز می کند و پشته ناوبری را به روز می کند. هنگامی که درخواست POP موفقیت آمیز باشد ، درست برمی گردد.

با این کار ، می توانید همانطور که در اینجا نشان داده شده در سه صفحه حرکت کنید:

کار با روتر

ویجت روتر توزیع کننده ای برای باز و بسته شدن صفحات برنامه است. این یک ناوبر را می پیچد و لیست فعلی صفحات خود را بر اساس وضعیت برنامه فعلی پیکربندی می کند. همچنین از سیستم عامل به رویدادها گوش می دهد.

برای کار با ویجت روتر ، باید مفاهیم زیر را درک کنید:

• RouteinFormationProvider: تعیین می کند که چگونه روتر در مورد مسیرهای رشته ای که سیستم عامل می خواهد نشان دهد می آموزد.
• RouteinFormationParser: اطلاعات مسیر را از مسیر RoutEinformationProvider به یک نوع داده تعریف شده توسط کاربر ترجمه می کند و نوع داده های تعریف شده توسط کاربر را به اطلاعات مسیر ترجمه می کند.
• Routerdelegate: برای ساختن یک ناوبر پیکربندی شده مناسب ، به RoutEinformationParser و وضعیت برنامه گوش می دهد.
• backbuttondispatcher: هنگامی که کاربر دکمه عقب را می اندازد ، به روتر گزارش می دهد.

در زیر تصویری از مفاهیم ذکر شده در بالا از تیم Flutter آورده شده است:

ما در این آموزش نمی توانیم از پشتی Backbuttondispatcher استفاده کنیم.

بیایید آن را امتحان کنیم!

انواع داده های تعریف شده توسط کاربر را اضافه کنید

از آنجا که RouteinformationParser با یک نوع داده تعریف شده توسط کاربر کار می کند ، ابتدا باید آن را تعریف کنید.

هنگام تعریف نوع داده تعریف شده توسط کاربر ، باید با ایجاد اولیه و گیرنده های آنها ، مسیرهای خود را تعریف کنید.

می توانید پیکربندی کاملاً اجرا شده را در این Github Gist پیدا کنید.

نماینده روتر را اضافه کنید

در مرحله بعد ، همانطور که در شکل زیر نشان داده شده است ، Routerdelegate را پیاده سازی خواهید کرد:

Routerdelegate به شما نیاز دارد تا NavigatorKey را اضافه کرده و روش های ساخت ، ContripConfiguration و SetNewRoutepath را پیاده سازی کنید.

شما می توانید نماینده کاملاً اجرا شده را در این Github پیدا کنید.

تجزیه کننده اطلاعات مسیر را اضافه کنید

در مرحله بعد ، RouteinformationParser را به شرح زیر پیاده سازی کنید:

RouteinformationParser شما را ملزم به اجرای روشهای تجزیه و تحلیل اطلاعات و بازگرداندن اطلاعات می کند.

شما می توانید تجزیه کننده کاملاً اجرا شده را در این Github پیدا کنید.

برنامه را برای استفاده از روتر به روز کنید

در آخر ، برنامه خود را برای استفاده از ویجت روتر ، همانطور که در زیر آمده است ، به روز خواهید کرد:

با این کار ، شما با موفقیت پشته تاریخ ناوبری را به روشی اعلامیه انجام داده اید. برنامه شما اکنون در صورت درخواست سیستم به یک مسیر هدف حرکت می کند. شما می توانید این کار را هم برای موبایل و هم برای وب آزمایش کنید.

اکنون باید درک کنید که چگونه Flutter Navigator 2. 0 کار می کند و چگونه از آن استفاده کنید!

حال ، بیایید یاد بگیریم که چگونه از ابزار CodeMagic CI/CD برای ساخت و توزیع برنامه استفاده کنیم.

برنامه را با CodeMagic بسازید و توزیع کنید

CodeMagic یک ابزار CI/CD را برای برنامه های Flutter خود در اختیار شما قرار می دهد. می توانید از آن برای ساخت و انتشار برنامه Flutter خود برای آزمایش استفاده کنید. اگر هنوز کاربر نیستید ، در اینجا به صورت رایگان ثبت نام کنید.

برای ساختن برنامه خود در CodeMagic ، باید:

یک برنامه ایجاد کنید و یک مخزن را از ارائه دهنده GIT خود وصل کنید.

مخزن پروژه خود را انتخاب کرده و تایپ کنید. در این حالت ، نوع پروژه برنامه Flutter (از طریق ویرایشگر گردش کار) است.

برای اولین بار بر روی "Finish Build Setup" کلیک کنید. برای یک برنامه موجود ، روی نماد تنظیمات کلیک کنید. با این کار صفحه ویرایشگر گردش کار باز می شود.

پلت فرم ساخت خود را انتخاب کنید.

بخش "ساخت محرک" را گسترش داده و یک ماشه ساخت را انتخاب کنید.

بخش "توزیع" را گسترش داده و قالب و حالت ساخت برنامه خود را انتخاب کنید.

تغییرات را ذخیره کرده و ساخت جدیدی را شروع کنید. تنظیمات ساخت خود را مشخص کنید.

ساخت خود را شروع کنید. اگر برنامه شما با موفقیت ایجاد شود ، Codemagic در کنار نام برنامه شما یک علامت سبز اضافه می کند. مصنوعات قابل بارگیری نیز اضافه می شوند.

از طریق آثار باستانی به برنامه خود دسترسی پیدا کرده و آن را برای آزمایش به اشتراک بگذارید.

نتیجه

در این مقاله ، شما یاد گرفتید که چگونه ناوبری را به صورت اعلامیه ای انجام دهید. شما همچنین یاد گرفتید که چگونه برنامه Flutter خود را با CodeMagic بسازید و آزاد کنید. تمام کد موجود در این مقاله در GitHub موجود است. امیدواریم که از این آموزش لذت ببرید!