Route — چیست، انواع و ایجاد مسیرها در Flutter
Route — یک کلاس انتزاعی در Flutter است که یک صفحه یا پنجره مجزا را در تاریخچه ناوبری Navigator نمایش میدهد. پیادهسازیهای مشخص Route — MaterialPageRoute، CupertinoPageRoute و PlatformRoute — تعیین میکنند که صفحه چگونه نمایش داده شود و از چه انیمیشنی در هنگام انتقال استفاده شود. برخلاف ویجت معمولی، Route چرخه حیات خاص خود را با متدهای didPush، didPop، didReplace و didChangeNext دارد. بر اساس Flutter API Reference (2026)، هر Route ModalBarrier را مدیریت میکند، ویژگیهای پلتفرم (بازگشت با کشیدن در iOS) را در نظر میگیرد و ایزولهسازی حالت بین صفحهها را تضمین میکند.
نکات مهم
- Route — کلاس انتزاعی صفحه در Flutter با چرخه حیات خاص خود (didPush, didPop, didReplace, didChangeNext)
- MaterialPageRoute — پیادهسازی استاندارد Route با انیمیشن Material (اسلاید از پایین) برای اندروید و دسکتاپ
- CupertinoPageRoute — پیادهسازی Route با انیمیشن iOS (اسلاید از راست + ژست بازگشت با کشیدن) برای iPhone و iPad
- چرخه حیات — Route مراحل زیر را طی میکند: انتقال (Transition)، نمایش (Active)، پنهانسازی (Inactive) و نابودی (Disposed)
- انتقال داده — Route آرگومانها را از طریق سازنده دریافت میکند و نتیجه را از طریق Future پس از اتمام بازمیگرداند
Route در Flutter چیست
Route — اساس سیستم ناوبری Flutter است. هر صفحهای که کاربر در برنامه میبیند توسط یک شیء Route که در پشته Navigator قرار دارد نمایش داده میشود. Route صفحه را از کد مدیریتی انتزاع میکند: Navigator Route را اضافه و حذف میکند و در داخل Route رابط کاربری که کاربر میبیند قرار دارد. چنین معماری مسئولیت را بین ناوبری و نمایش تقسیم میکند.
برخلاف تعویض ساده ویجتها، Route خدماتی را فراهم میکند که برای ویجتهای معمولی در دسترس نیست: ModalBarrier (تاریک کردن پسزمینه هنگام باز بودن دیالوگ)، مدیریت انیمیشن ورود و خروج، پردازش دکمه سختافزاری «بازگشت» در اندروید و یکپارچهسازی با انیمیشن Hero برای انتقالهای روان بین صفحهها.
بر اساس Flutter Cookbook (2026)، Route یک عنصر کلیدی برای انیمیشن Hero است: ویجت Hero در یک Route به طور خودکار انتقال به ویجت Hero در Route بعدی را انیمیشن میکند و اثر یک عنصر «پروازکننده» را ایجاد میکند. این دقیقاً به این دلیل امکانپذیر است که Route هر دو صفحه را در طول انیمیشن در Overlay نگه میدارد.
Route به عنوان بلوک ساختمانی ناوبری
Route هم برای برنامههای ساده موبایل (از طریق Navigator 1.0) و هم برای سناریوهای پیچیده با لینکهای عمیق (Navigator 2.0) اساس کار است. در Navigator 2.0 Route نمایانگر Page است که RouterDelegate آن را از پیکربندی مسیر تبدیل میکند. بنابراین، درک Route برای کار با هر سیستم ناوبری Flutter — صرفنظر از رویکرد یا بسته انتخابی — ضروری است.
انواع Route: MaterialPageRoute و CupertinoPageRoute
Flutter چندین پیادهسازی داخلی Route ارائه میدهد که هر کدام رفتار را برای پلتفرم خاصی تنظیم میکند. انتخاب نوع صحیح Route بر تجربه کاربر تأثیر میگذارد: انیمیشن Material در اندروید و انیمیشن Cupertino در iOS حس یک برنامه «بومی» را ایجاد میکنند.
| نوع Route | انیمیشن | پلتفرم | ویژگیها |
|---|---|---|---|
| MaterialPageRoute | اسلاید از پایین به بالا | اندروید، دسکتاپ | سایه در هنگام انتقال، پردازش خودکار SafeArea |
| CupertinoPageRoute | اسلاید از راست به چپ | iOS، iPadOS | ژست بازگشت با کشیدن، پسزمینه شفاف در هنگام انتقال |
| PlatformRoute | انتخاب خودکار | همه پلتفرمها | نوع را بر اساس TargetPlatform انتخاب میکند |
| PageRouteBuilder | سفارشی | همه پلتفرمها | کنترل کامل بر انیمیشن از طریق AnimationController |
MaterialPageRoute: استاندارد برای اندروید
MaterialPageRoute — متداولترین پیادهسازی Route است. ورود صفحه جدید را از پایین به بالا با ظاهر تدریجی انیمیشن میکند. در هنگام خروج، صفحه از بالا به پایین انیمیشن میشود و به موقعیت اولیه بازمیگردد. نوار ابزار (AppBar) و بدنه صفحه جداگانه انیمیشن میشوند و اثر سلسلهمراتبی ایجاد میکنند.
CupertinoPageRoute: سبک ناوبری iOS
CupertinoPageRoute شبیه UINavigationController در iOS است. صفحه جدید از راست وارد میشود و صفحه قبلی را میپوشاند. ویژگی کلیدی — پشتیبانی از ژست تعاملی بازگشت با کشیدن که از طریق CupertinoBackGestureDetector پیادهسازی شده است. این ژست حتی در میانه انیمیشن نیز پردازش میشود و رفتار طبیعی آشنا برای کاربران iPhone را فراهم میکند.
چرخه حیات Route: از ایجاد تا نابودی
Route چرخه حیات خاص خود را دارد که با چرخه حیات StatefulWidget معمولی متفاوت است. درک این چرخه برای مقداردهی صحیح دادهها، اشتراک در استریمها و آزادسازی منابع هنگام بسته شدن صفحه ضروری است.
مراحل چرخه حیات Route
چرخه حیات Route از چهار مرحله اصلی تشکیل شده است. Transition — Route ایجاد و در هنگام ورود انیمیشن میشود (didPush فراخوانی میشود). Active — Route به طور کامل نمایش داده میشود و با کاربر تعامل دارد. Inactive — Route دیگری Route فعلی را میپوشاند (دیالوگ، صفحه پایین)، اما Route در پشته باقی میماند. Disposed — Route از پشته حذف و نابود میشود، didPop و dispose فراخوانی میشوند.
متدهای چرخه حیات Route میتوانند در پیادهسازی سفارشی بازنویسی شوند. به عنوان مثال، didPop زمانی فراخوانی میشود که Route از پشته حذف میشود — در اینجا میتوان پیشنویس دادهها را ذخیره کرد. didChangeNext زمانی فراخوانی میشود که Route بعدی در پشته تغییر کرده است — برای بهروزرسانی UI هنگام تغییر تاریخچه ناوبری مفید است.
بر اساس Flutter API Route.didPop (2026)، مهم است که چرخه حیات Route را با چرخه حیات State داخل Route اشتباه نگیرید. StatefulWidget داخل Route initState و dispose خاص خود را دارد که به ترتیب در مراحل Transition و Disposed فراخوانی میشوند. Route بیشتر از State داخلی خود عمر میکند — Route حتی زمانی که ویجتهای آن به طور موقت توسط Route دیگری پنهان شدهاند در Overlay باقی میماند.
انتقال داده از طریق Route بین صفحهها
Route مکانیسمهایی را برای انتقال داده هم در ورود (هنگام ایجاد) و هم در خروج (هنگام اتمام) فراهم میکند. انتقال صحیح داده از طریق Route نیاز به متغیرهای سراسری و InheritedWidget را از بین میبرد و ناوبری را نوعامن و قابل پیشبینی میکند.
برای انتقال داده به صفحه جدید از سازنده ویجت دریافتکننده یا آرگومان arguments در Navigator.pushNamed استفاده میشود. در داخل Route دادهها از طریق RouteSettings.arguments که در شیء Route ذخیره میشود قابل دسترسی هستند. این رویکرد برای همه انواع Route — MaterialPageRoute، CupertinoPageRoute و پیادهسازیهای سفارشی — کار میکند.
برای بازگرداندن داده از آرگومان دوم Navigator.pop(context, result) استفاده میشود. Navigator.push یک Future
مثال انتقال داده از طریق سازنده Route
در فراخوانی مستقیم Navigator.push با MaterialPageRoute دادهها از طریق سازنده صفحه مقصد منتقل میشوند. MethodChannel استفاده نمیشود — این یک تعامل خالص Dart است. این رویکرد برای انتقال نوعامن اشیاء پیچیده ترجیح داده میشود.
مثال ایجاد Route سفارشی
بیایید مثال ایجاد یک Route سفارشی با انیمیشن خاص و انتقال داده را بررسی کنیم. PageRouteBuilder به شما امکان میدهد انیمیشن ورود و خروج را با کنترل کامل بر منحنی انیمیشن و مدت زمان تعریف کنید.
dart
// Route سفارشی با انیمیشن اسلاید
Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) {
return DetailPage(productId: '42');
},
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 0.3);
const end = Offset.zero;
final tween = Tween(begin: begin, end: end);
final offsetAnimation = animation.drive(tween);
return SlideTransition(position: offsetAnimation, child: child);
},
transitionDuration: const Duration(milliseconds: 400),
));
// بازگرداندن داده از صفحه
ElevatedButton(
onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
child: const Text('انتخاب'),
);
// دریافت نتیجه در صفحه فراخوان
final result = await Navigator.push(context, MaterialPageRoute(
builder: (context) => const SelectionPage(),
));
if (result != null) {
print('انتخاب شده: ${result['selected']}');
}در مثال PageRouteBuilder یک انیمیشن سفارشی اسلاید از پایین با شفافیت تعریف میکند. transitionDuration سرعت انیمیشن را تعیین میکند. کد همچنین انتقال نتیجه را نشان میدهد: صفحه جزئیات یک Map با انتخاب کاربر برمیگرداند و صفحه فراخوان این دادهها را از طریق Future حاصل از push دریافت میکند. Route ایزولهسازی کامل را تضمین میکند: پیشنویسهای صفحه جزئیات بر وضعیت لیست تأثیر نمیگذارند.
سؤالات متداول
تفاوت بین Route و Widget در Flutter چیست؟
Route — شیءای است که صفحه را در سطح ناوبری مدیریت میکند: انیمیشن، ModalBarrier و چرخه حیات را ذخیره میکند. Widget — توصیف بخشی از رابط کاربری است. Route ویجت را در درون خود نگه میدارد اما همچنین خدماتی (لایه Overlay، انیمیشن Hero) ارائه میدهد که برای ویجتهای معمولی در دسترس نیست. یک Route میتواند سلسلهمراتب پیچیدهای از ویجتها با هر عمقی را در خود جای دهد.
چگونه یک Route با انیمیشن سفارشی ایجاد کنیم؟
از PageRouteBuilder با پارامترهای pageBuilder (ساخت صفحه) و transitionsBuilder (تعریف انیمیشن) استفاده کنید. در transitionsBuilder، animation (0.0–1.0) و secondaryAnimation برای انیمیشنهای موازی در دسترس هستند. برای کنترل کامل، یک زیرکلاس از Route ایجاد کنید و buildPage، createAnimationController و buildTransitions را بازنویسی کنید که دسترسی به AnimationController سطح پایین را فراهم میکند.
چگونه یک شیء پیچیده بین Routeها منتقل کنیم؟
برای انتقال اشیاء پیچیده از سازنده صفحه مقصد در Navigator.push مستقیم یا آرگومان arguments در pushNamed استفاده کنید. مطمئن شوید که شیء قابل سریالسازی است (Map، JSON یا کلاس سفارشی). برای انتقال نوعامن در Flutter از مدلهای freezed یا json_serializable استفاده میشود که deserialization صحیح را هنگام انتقال از طریق RouteSettings تضمین میکنند.
چرا Route ممکن است dispose را فراخوانی نکند؟
Route.dispose فراخوانی نمیشود اگر Route در پشته Navigator باقی بماند. به عنوان مثال، هنگام باز کردن Route جدید، Route قدیمی به حالت غیرفعال (Inactive) میرود اما نابود نمیشود — برای بازگشت سریع در پشته باقی میماند. Dispose فقط هنگام حذف Route از پشته از طریق pop، pushReplacement یا pushAndRemoveUntil فراخوانی میشود. برای آزادسازی منابع از dispose State داخل Route استفاده کنید، نه dispose خود Route.
چگونه بررسی کنیم کدام Route در حال حاضر فعال است؟
از ModalRoute.of(context) برای دریافت Route فعلی از BuildContext استفاده کنید. خاصیت ModalRoute.isActive نشان میدهد که آیا Route صفحه قابل مشاهده فعلی است. ModalRoute.isCurrent — true اگر Route در بالای پشته باشد. برای مشاهده تغییرات پشته، در ناظران Navigator از طریق RouteAware و RouteObserver مشترک شوید که درباره تغییر Route فعال اطلاعرسانی میکنند.
خلاصه
- Route — کلاس انتزاعی صفحه در Flutter با چرخه حیات (didPush, didPop, didReplace, didChangeNext) و پشتیبانی از ModalBarrier و انیمیشن Hero
- MaterialPageRoute — پیادهسازی برای اندروید با انیمیشن اسلاید از پایین، سایه و SafeArea خودکار
- CupertinoPageRoute — پیادهسازی برای iOS با انیمیشن اسلاید از راست و ژست تعاملی بازگشت با کشیدن
- PageRouteBuilder — ابزاری برای ایجاد Route با انیمیشن سفارشی از طریق transitionsBuilder و AnimationController
- انتقال داده — از طریق سازنده Route (push) یا arguments (pushNamed) در ورود؛ از طریق Navigator.pop(context, result) در خروج با Future
- چرخه حیات — چهار مرحله: Transition (didPush)، Active، Inactive (پوشانده شده توسط Route دیگر)، Disposed (didPop + dispose)
- ایزولهسازی صفحهها — هر Route BuildContext وحالت خاص خود را دارد که از نشت جلوگیری میکند و مدیریت داده را ساده میکند
ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد
IT Sectr از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید