Demo Videos

Usage Demonstration Strength in Flutter Web

alghwalbi_easy_router

Experience effortless navigation in your Flutter apps across platforms with alghwalbi_easy_router. Seamlessly adapts to each environment, mirroring web routes in the browser's search bar on the web, while integrating with default mobile behavior. Say goodbye to platform inconsistencies and hello to a consistent user experience. Simplify routing with alghwalbi_easy_router today!

Installation

To install alghwalbi_easy_router from pub-web.flutter-io.cn, click here.

Usage

  1. Define Routes:

    void main() {
      WidgetsFlutterBinding.ensureInitialized();
      EasyRouter.removeHashFromUrl();
      EasyRouter.allAppRoutes = {
        '/': (context, state, data) {
          return EasyRouter.routeInfo(
              child: const MainPage(),
              title: 'Main Page',
              key: const ValueKey('Easy Route main'));
        },
        '/login': (context, state, data) => EasyRouter.routeInfo(
              child: const LoginPage(),
              title: 'Login Page',
              key: const ValueKey('Easy Route Login'),
            ),
        '/signup': (context, state, data) => EasyRouter.routeInfo(
              child: const SignUpPage(),
              title: 'Signup Page',
              key: const ValueKey('Easy Route Signup'),
            ),
        // Add more routes as needed
      };
      runApp(const MyApp());
    }
    
  2. Use Material App Router:

    MaterialApp.router(
      routerDelegate: EasyRouter.easyRouterDelegate,
      routeInformationParser: EasyRouter.getEasyRouterParser,
      backButtonDispatcher: EasyRouter.getEasyRouterBackButtonDispatcher,
      debugShowCheckedModeBanner: false,
      ...
    )
    
  3. Remove Hash from URL:

    void main() {
      WidgetsFlutterBinding.ensureInitialized();
      EasyRouter.removeHashFromUrl();
    ...
    }
    
  4. Navigate between Pages:

    EasyRouter.go(
      context: context,
      route: '/login', // Provide your destination route
      replaceRoute: true, // Optional
      data: {}, // Optional: Provide JSON data to send from page to another
      invalidRouterDialog: // Optional: Provide your custom dynamic Function(BuildContext)? or dialog when the route is not found
    )
    
  5. Back Navigation:

    EasyRouter.back(context)
    

    Optionally, you can specify the route to go to if back navigation fails:

    EasyRouter.back(context, popFailedRoute: '/')
    

For more detailed information and usage examples, refer to the official pub-web.flutter-io.cn page.


Feel free to explore the capabilities of alghwalbi_easy_router and simplify navigation within your Flutter apps! If you encounter any issues or have questions, don't hesitate to reach out. Happy coding!