جا به جایی بین صفحات route در فلاتر با کلاس Navigator

جا به جایی بین صفحات route در فلاتر با کلاس Navigator ، تقریبا میتوان گفت تمامی اپلیکیشن ها بیش از یک صفحه برای نمایش دارند و این به معنای وجود چندین فایل و view برای نمایش است.
یک مثال خیلی ساده یک اپلیکیشن فروشگاهی ست که با لمس هر کالا وارد صفحه دیگری برای نمایش جزییات کالا خواهیم شد.اکنون میخواهیم در Flutter این جابه جایی را بررسی کنیم.

جا به جایی بین صفحات در فلاتر با کلاس Navigator

نکته:
قبل از شروع به بحث این نکته را در نظر داشته باشید که صفحات در فلاتر route نامیده میشود.

در اندروید route همان اکتیوتی Activity است.
در iOS هم route همان ViewController است.
و در فلاتر route چیزی جز ویجت widget نیست !

برای حرکت به route جدید ما در فلاتر از کلاس Navigator استفاده میکنیم.

در این پست از تجاری اپ ما مراحل زیر را انجام خواهیم داد:

• دو route خواهیم ساخت
• به route دوم حرکت یا navigate میکنیم با استفاده از Navigator.push
• از route دوم به route اول برخواهیم گشت با استفاده از Navigator.pop

همچنین بخوانید: نمایش عکس در فلاتر Flutter به دو روش آفلاین و آنلاین

ساخت دو route برای جا به جایی بین route در فلاتر

خب ما در مرحله اول باید دو route بسازیم که تنها شامل یک دکمه یا button هستند برای رفت و برگشت بین route ها با لمس کردن دکمه در route اول به route دوم خواهیم رفت و با لمس کردن دکمه در route دوم به route اول باز خواهیم گشت.

پس در فایل main.dart دو route زیر را قرار خواهیم داد:

 class FirstRoute extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('First Route'),
       ),
       body: Center(
         child: RaisedButton(
           child: Text('Open route'),
           onPressed: () {
             // Navigate to second route when tapped.
           },
         ),
       ),
     );
   }
 }
class SecondRoute extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Second Route"),
       ),
       body: Center(
         child: RaisedButton(
           onPressed: () {
             // Navigate back to first route when tapped.
           },
           child: Text('Go back!'),
         ),
       ),
     );
   }
 }

با استفاده از Navigator.push به route دوم حرکت یا navigate میکنیم

فلاتر این امکان را به ما میدهد که با استفاده از متد push مربوط به کلاس Navigator بتوانیم route را به استک route ها اضافه کنیم و همچنین با خود کلاس Navigator آن را مدیریت کنیم.
ما میتوانیم route خودرا بسازیم و یا با استفاده از کلاس هایی مثل MaterialPageRoute یک route ایجاد کنیم که با انیمیشن حرکت میکند !

خب حال باید درون بلاک onPressed مربوط به FirstRoute دستورات زیر را برای منتقل شدن به route دوم بنویسیم:

// Within the FirstRoute widget
 onPressed: () {
   Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => SecondRoute()),
   );
 }

از route دوم به route اول برخواهیم گشت با استفاده از Navigator.pop

حالا چطور به route قبل برگردیم ؟! خب در بخش قبل گفتیم که کلاس Navigator به ما این امکان را میدهد که route ها را درون یک استک قرار دهیم و بین آنها حرکت کنیم پس قاعدتا زمانی که ما route دوم هستیم بدین معناست که route اول دقیقا پشت سر ما قرار دارد !(مثل اکتیویتی های اندروید).پس میتوانیم route فعلی را pop یا نابود کنیم و به route اول برگردیم.

بنابراین در متد onPressed مربوط به SecondRoute دستورات زیر را مینویسیم:

 // Within the SecondRoute widget
 onPressed: () {
   Navigator.pop(context);
 }

در نهایت دستورات کلی ما بدین صورت خواهد بود:

 import 'package:flutter/material.dart';

void main() {
   runApp(MaterialApp(
     title: 'Navigation Basics',
     home: FirstRoute(),
   ));
 }
class FirstRoute extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('First Route'),
       ),
       body: Center(
         child: RaisedButton(
           child: Text('Open route'),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute(builder: (context) => SecondRoute()),
             );
           },
         ),
       ),
     );
   }
 }

class SecondRoute extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Second Route"),
       ),
       body: Center(
         child: RaisedButton(
           onPressed: () {
             Navigator.pop(context);
           },
           child: Text('Go back!'),
         ),
       ),
     );
   }
 }

و همچنین پس از اجرای برنامه نتیجه را بدین صورت خواهید دید:

همچنین شما میتوانید route مقصد را درون فایل دارت دیگری قرار دهید بدین صورت که با کلیک راست برروی دایرکتوری lib و New / Dart file یک فایل دارت جدید بسازید و دستورات SecondRoute را درون آن قرار دهید.
من یک فایل دارت dart جدید با نام SecondView ایجاد کردم و درون بلاک onPressed مربوط به FirstRoute چنین کدی نوشتم:

  Navigator.push(
               context,
               MaterialPageRoute(builder: (context) => SecondView()),
             );

اما خواهید دید که یک پیغام خطا برای SecondView نمایان خواهد شد که مشخص کننده آن است که این فایل برای کلاس فعلی شما ناشناخته ست پس باید آنرا با ایمپورت import کردن بشناسانید:

import 'SecondView.dart';

حال اگر برنامه را اجرا کنید نتیجه را به همان صورت فوق خواهید دید.

امیدوارم این آموزش برای شما مفید بوده باشد…