ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

مسیریابی و جا به جایی بین صفحات در فلاتر

4 دیدگاه
10 دقیقه برای مطالعه
جا به جایی صفحات در فلاتر

مسیریابی بخش ضروری در هر اپلیکیشنی میباشد.

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

مسیریابی در فلاتر چیست؟

مسیریابی (Routing) در فریم‌ورک فلاتر (Flutter) به معنای مدیریت ناوبری و تغییر صفحات یک اپلیکیشن موبایل یا وب است.

مسیریابی به برنامه‌های شما اجازه می‌دهد تا صفحات مختلف را به صورت دینامیک بارگذاری کنند و کاربران را بین آنها جابه‌جا کنند.

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

آموزش نصب فلاتر

در فلاتر به صفحات route میگوییم که در اندروید اکتیویتی نام دارد و در برنامه نویسی iOS هم ViewController

حالا برای اینکه بتوانیم مسیر خودمون و ایجاد کنیم و بین دو صفحه جا به جا شویم باید از کلاس Navigator استفاده کنیم. این کلاس وظیفه مسیریابی در اپلیکیشن را انجام میدهد.

Navigator یک کلاس در فلاتر است که به شما این امکان را می دهد که بین صفحات مختلف در اپلیکیشن خود پیمایش کنید.

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

برای این که بهتر متوجه بشید اجازه بدید با یک مثال جلو بریم.

جا به جایی صفحه در فلاتر

در مثال زیر ما دوتا صفحه مختلف ایجاد کردیم با نام های FirstRoute و SecondRoute

 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 را به پشته اضافه می کند.

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

در دستور بالا با کلیک کردن روی دکمه در صفحه اول وارد صفحه دوم می شویم برای اینکار از MaterialPageRoute استفاده کردیم.

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

آموزش پیاده سازی BottomNavigationBar در فلاتر

onPressed: () {
  Navigator.pop(context);
}

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

توابع کلاس Navigator

  • push(): برای اضافه کردن یک صفحه جدید به بالای پشته صفحات استفاده می شود.
  • pop(): برای حذف صفحه فعلی از بالای پشته صفحات استفاده می شود.
  • pushReplacement(): برای جایگزینی صفحه فعلی با یک صفحه جدید استفاده می شود.
  • popUntil(): برای حذف صفحات از بالای پشته صفحات تا زمانی که به یک صفحه خاص برسید استفاده می شود.
  • replaceRouteBelow(): برای جایگزینی صفحه ای که در زیر صفحه فعلی قرار دارد با یک صفحه جدید استفاده می شود.

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

4 پاسخ به “مسیریابی و جا به جایی بین صفحات در فلاتر”

  1. Rahdan گفت:

    سلام وقت بخیر برای آموش های خوبتون ممنون . جناب برا اینکه بخواهیم اطلاعات بین صفحات ارسال کنیم چ باید کرد بلفرض ما یک صفحه لیست ب تعداد 100 آیتم داریم می خواهیم بر روی هر یک از این آیتمها ک کلیک کردیم وارد یک صفحه شود و در اون صفحه در قسمت AppBar شماره آیتم را ب ما نشان دهد و مقدار اونم ب ما در وسط صفحه نمایش دهد . این صفحه دوم ما برای همه این 100 آیتم هست در واقع می خوام بگم چطوری باید این اطلاعات را داینامیک کنیم ک برای همه این 100 آیتم فقط ی صفحه باشه وقتی ک از صفحه دوم برگشتیم ب اون صفحه لیست پاک بشه و وقتی روی آیتم 55 کلیک کردیم رفتیم صفحه دوم اطلاعات این آیتم 55 جایگزین بلفرض آیتم 23 بشه ؟

    • Hesam گفت:

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

  2. sam گفت:

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

    • Hesam گفت:

      سلام از نسخه 2 به بعد منسوخ شده و بصورت پیش فرض این ویژگی false هست برای جایگزین از ویژگی های systemOverlayStyle و foregroundColor استفاده کنید.
      با جستجو کردن نام ویژگی در گوگل یا سایت خود فلاتر میتونید داکیومنت مربوطه را مشاهده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hesam
08 مارس 2019
آموزش فارسی فلاتر
آموزش فارسی flutter