روش ایجاد روتر در فلاتر

روتر چیست؟

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

چگونه یک روتر بسازیم؟

برای اینکار ابتدا در پوشه lib یک فایل بنام router.dart ایجاد نمایید.

سپس کد زیر را درون آن جایگذاری کنید.

class Router {
  static const String mainRoute =  '/';

  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case mainRoute :
        return MaterialPageRoute(builder: (_) => MainScreen());
      default:
        return MaterialPageRoute(
            builder: (_) => Scaffold(
              body: Center(
                  child: Text('No route defined for ${settings.name}')),
            ));
    }
  }

  static namedNavigateTo(BuildContext context, String routeName,
      {bool replacement = false, bool named = true, Object arguments}) {
    if (replacement) {
      Navigator.pushReplacementNamed(context, routeName, arguments: arguments);
    } else {
      Navigator.pushNamed(context, routeName, arguments: arguments);
    }
  }
}

برای افزودن صفحه جدید خود به روتر باید ابتدا آن را به صورت یک متغیر تعریف کنید.

static const String exampleRoute =  '/example';

سپس در Switch ایجاد شده کیس زیر را اضافه کنید.

case exampleRoute :   
      return MaterialPageRoute(builder: (_) => ExampleScreen());

قبل از تغییر فایل router ابتدا باید صفحه خود را اضافه نمایید سپس فایل روتر را تغییر دهید.
ExampleScreen نام کلاس صفحه جدید شماست.

برای استفاده از روتر و فعالسازی روتر شما باید به فایل main.dart رفته و در قسمت MaterialApp باید دو پارامتر زیر را اضافه کنید.

onGenerateRoute: Router.generateRoute,
initialRoute: Router.mainRoute ,

روتر اصلی شما با افزودن کد Router.mainRoute میباشد و شما میتوانید آنرا تغییر دهید.

برای انتقال از یک صفحه به صفحه ای دیگر باید از دستور زیر استفاده کنید.

Router.namedNavigateTo(context, Router.exampleRoute , replacement:false);

برای انتقال کاربر از صفحه فعلی به صفحه دیگر باید Router.exampleRoute را به صفحه که میخواهید تغییر دهید، اگر میخواهید که صفحه جدید جایگزین صفحه قبلی شود باید آپشن replacement را فعال و مقدار آنرا true نگه دارید.

برای حمایت از ما کلیک کنید