• Installation
• Setup
• Registering route
• Registering route with arguments
• Navigation

Installation

dependencies:
  # add mio_web_router to your dependencies
  mio_web_router:

dev_dependencies:
  # add the generator to your dev_dependencies
  mio_web_router_generator:
  # add build runner if not already added
  build_runner:

Setup

1. Define a top-level class (lets call it Application) then annotate it with @InitRouter().
2. Call the Generated func ApplicationRouteGenerator.onGenerateRoute and ApplicationRouteGenerator.onUnknownRoute in your application params.

@InitRouter()
class Application extends StatelessWidget {
  const Application({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      title: 'Mio Web Router Generator',
      initialRoute: '/',
      onGenerateRoute: ApplicationRouteGenerator.onGenerateRoute,
      onUnknownRoute: ApplicationRouteGenerator.onUnknownRoute,
    );
  }
}

Note: you can tell mio_web_router what directories to generate for using the generateForDir property inside of @InitRouter. The following example will only process files inside of the test folder.

@InitRouter(generateForDir: ['test'])

Registering route

All you have to do now is annotate your route page classes with @RoutePage and let the generator do the work.

@RoutePage(path: '/')
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

@RoutePage(path: '/users/:uuid')
class UserPage extends StatefulWidget {
  final String uuid;

  const UserPage({Key? key, required this.uuid}) : super(key: key);

  @override
  State<UserPage> createState() => _UserPageState();
}

Registering route with arguments

class UserTestPageArgs {
  final String userUuid;
  final String testUuid;

  UserTestPageArgs({
    @RoutePageParam(paramName: 'uuid') required this.userUuid,
    required this.testUuid,
  });
}

@RoutePage(path: '/users/:uuid/:testUuid')
class UserTestPage extends StatelessWidget {
  final UserTestPageArgs args;

  const UserTestPage({
    Key? key,
    @RoutePageArgs() required this.args,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User uuid: ${args.userUuid}'),
        centerTitle: true,
      ),
      body: Center(
        child: Text('Test uuid: ${args.testUuid}'),
      ),
    );
  }
}

Navigation

//for empty page constructor
Navigator.of(context).pushNamed(ApplicationRouter.getUsersPageRoutePath());

//with named params
Navigator.of(context).pushNamed(ApplicationRouter.getUserPageRoutePath(uuid: uuid));

//with arguments model
Navigator.of(context).pushNamed(
  ApplicationRouter.getUserTestPageRoutePath(
    args: UserTestPageArgs(
      userUuid: uuid,
      testUuid: testUuid,
    ),
  ),
);