Your First App

The complete file#

Replace lib/main.dart with:

import 'package:material_ui/material_ui.dart';
import 'package:xue_hua_adaptive_sliding_layout/xue_hua_adaptive_sliding_layout.dart';

// 1. One route table for the whole app.
final router = AdaptiveRouter(
  initialLocation: '/products',
  routes: [AdaptiveRoute(path: '/products', builder: (context, state) => const ProductsPage())],
);

void main() => runApp(const ShopApp());

// 2. Hand the router to MaterialApp.router.
class ShopApp extends StatelessWidget {
  const ShopApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(title: 'Shop', routerConfig: router);
  }
}

// 3. A normal Flutter page. Nothing package-specific here.
class ProductsPage extends StatelessWidget {
  const ProductsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Products')),
      body: const Center(child: Text('Hello from /products')),
    );
  }
}

What each part does#

1. `AdaptiveRouter` is the route table. You create it once and keep it in a top-level variable (or any object your app owns) — there is no service locator. initialLocation is where the app starts when the platform gives no URL.
2. `AdaptiveRoute` is one page: a path and a builder(context, state) that returns an ordinary widget.
3. `MaterialApp.router(routerConfig: router)` plugs the router into Flutter. AdaptiveRouter is a RouterConfig, so nothing else is needed.
4. `ProductsPage` is a plain Scaffold. Pages do not extend or know about anything from the package.

Run it#

flutter run -d chrome

You will see one page titled Products saying “Hello from /products”. On the web the address bar shows /#/products: the router uses hash URLs, so the app can be hosted on any static server (GitHub Pages included) without rewrite rules.

Next: Nested routes & parameters.