custom_router

Routeur de flottement personnalisé

Installer

Dans pubspec.yaml :

 dependencies :
  custom_router :
    git :
      url : https://github.com/brookesb91/custom_router.git
      ref : master 

Usage

Utilisation de base

 import 'package:custom_router/custom_router.dart' ;

class MyApp extends StatelessWidget {
  const MyApp ({ Key ? key}) : super (key : key);

  // This widget is the root of your application.
  @override
  Widget build ( BuildContext context) {
    final router = CustomRouter (
      {
        '/' : HomePage .route,
        '/friends' : FriendsPage .route,
        '/profile' : ProfilePage .route,
      },
      onUnknownRoute : (_) => const Text ( 'Unknown route' ),
    );

    return MaterialApp . router (
      routerDelegate : router.delegate,
      routeInformationParser : router.parser,
    );
  }
}

Avancé avec un écran d'éclaboussures et des itinéraires autorisés

 import 'package:custom_router/custom_router.dart' ;

class MyApp extends StatefulWidget {
  const MyApp ({ Key ? key}) : super (key : key);

  @override
  State < MyApp > createState () => _MyAppState ();
}

class _MyAppState extends State < MyApp > {
  bool _isLoaded = false ;
  bool _isAuthorised = false ;

  // This widget is the root of your application.
  @override
  Widget build ( BuildContext context) {
    if ( ! _isLoaded) {
      return SplashPage (onComplete : (authorised) {
        setState (() {
          _isLoaded = true ;
          _isAuthorised = authorised;
        });
      });
    }

    final router = CustomRouter (
      _isAuthorised
          ? {
              '/' : HomePage .route,
              '/friends' : FriendsPage .route,
              '/profile' : ProfilePage .route,
            }
          : {
              '/' : LoginPage .route,
            },
      onUnknownRoute : (_) => const Text ( 'Unknown route' ),
    );

    return MaterialApp . router (
      routerDelegate : router.delegate,
      routeInformationParser : router.parser,
    );
  }
}

Utilisation de la méthode Builder

 return CustomRouter . builder (
  _isAuthorised
      ? {
          '/' : HomePage .route,
          '/friends' : FriendsPage .route,
          '/profile' : ProfilePage .route,
        }
      : {
          '/' : LoginPage .route,
        },
  onUnknownRoute : (_) => const Text ( 'Unknown route' ),
  builder : (delegate, parser) {
    return MaterialApp . router (
      routerDelegate : delegate,
      routeInformationParser : parser,
    );
  },
);

Navigation

Utilisation du widget RouterLink

 import 'package:custom_router/widgets/router_link.dart' ;


@override
Widget build ( BuildContext context) {
  return Scaffold (
    appBar : AppBar (
      title : const Text ( 'Friends' ),
    ),
    body : ListView . builder (
      itemCount : 10 ,
      itemBuilder : (context, index) {
        /// Create a router link, passing it the navigation path
        /// and optional query parameters.
        return RouterLink (
          '/profile' ,
          queryParameters : { 'profileId' : '$ index ' },
          /// The builder provides a `go` function which will
          /// initiate the navigation when called.
          builder : (context, go) {
            return ListTile (
              title : Text ( 'Friend $ index ' ),
              onTap : go,
            );
          },
        );
      },
    ),
  );
}

État de l'itinéraire

Utilisation du widget RouterStateBuilder

 static Widget route ( BuildContext context) {
  return RouteStateBuilder (builder : (context, state) {
    final profileId = state.queryParameters[ 'profileId' ];

    assert (profileId != null , 'profileId is required' );

    return ProfilePage (
      profileId : profileId as String ,
    );
  });
}