AsyncRouteConfig<TRouteData extends Widget, TFetchData> class abstract

  1. AsyncRouteConfig

Use this for routes that must:

  • Fetch data asynchronously before building the final screen.
  • Typically use an id from the URL or query params.

Most common pattern:

Example:

class ProductDetailsRouteConfig
    extends AsyncRouteConfig<ProductDetailsScreen, product> {
  const ProductDetailsRouteConfig();

  @override
  String get name => 'ProductDetails';

  @override
  ProductDetailsScreen routeConfig(GoRouterState state) {
    final id = state.pathParameters['id']!;
    return ProductDetailsScreen(id: id);
  }

  @override
  String getFetchingId(GoRouterState state) => state.pathParameters['id']!;

  @override
  Future<product?> fetch(String id) => productRepository.getproductById(id);

  @override
  Widget buildScreen(ProductDetailsScreen data, {product? fetched}) {
    return ProductDetailsScreen(
      id: data.id,
      initialproduct: fetched,
    );
  }

  @override
  Widget get loadingWidget => const Center(child: CircularProgressIndicator());

  @override
  Widget buildError(AsyncSnapshot<product?> snapshot) {
    return ErrorScreen(error: snapshot.error);
  }
}

// When registering with GoRouter:
final productConfig = ProductDetailsRouteConfig();

GoRoute(
  name: productConfig.name,
  path: productConfig.path,
  builder: (context, state) {
    final routeData = productConfig.routeConfig(state);
    if (!productConfig.shouldFetch(routeData)) {
      // If no fetch required, directly build screen without async call.
      return productConfig.buildScreen(routeData);
    }

    final id = productConfig.getFetchingId(state);

    return FutureBuilder<product?>(
      future: productConfig.fetch(id),
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return productConfig.loadingWidget;
        }
        if (!snapshot.hasData) {
          return productConfig.buildError(snapshot);
        }
        return productConfig.buildScreen(
          routeData,
          fetched: snapshot.data,
        );
      },
    );
  },
);

Constructors

AsyncRouteConfig()
const

Properties

hashCode → int
The hash code for this object.
no setterinherited
loadingWidget → Widget
Widget displayed while data is being fetched.
no setter
name → String
Unique name for GoRouter.
no setter
path → String
Path for this route.
no setter
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

buildError(AsyncSnapshot<TFetchData?> snapshot) → Widget
Widget displayed when async fetch fails or returns an error.
buildScreen(TRouteData data, {TFetchData? fetched}) → Widget
Final screen builder.
fetch(String id) → Future<TFetchData?>
Async data fetch method.
getFetchingId(GoRouterState state) → String
Extract the ID (or key) from GoRouterState which will be passed to fetch.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
routeConfig(GoRouterState state) → TRouteData
Convert GoRouterState -> initial route data widget.
shouldFetch(TRouteData data) → bool
Optional pre-condition before fetching.
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited