在 Flutter 应用开发中，路由配置是实现页面跳转和导航的核心机制。通过合理的路由设置，可以构建流畅的用户体验。

应用入口配置

在主文件中进行路由初始化：

void main() {
  runApp(const NavigationApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: routeHandler,
    );
  }
}

initialRoute 指定应用启动时的默认页面路径，通常指向首页。onGenerateRoute 是路由生成器的标准配置方法。

路由映射表定义

创建集中化的路由映射配置：

final Map<String, WidgetBuilder> screenRoutes = {
  '/': (BuildContext context) => const DashboardScreen(),
  '/dashboard': (BuildContext context) => const DashboardScreen(),
  '/products': (BuildContext context) => const ProductListScreen(),
  '/item-detail': (BuildContext context) => ItemDetailScreen(data: ModalRoute.of(context)?.settings.arguments),
  '/search-page': (BuildContext context) => SearchScreen(data: ModalRoute.of(context)?.settings.arguments),
  '/profile': (BuildContext context) => const ProfileScreen(),
  '/settings': (BuildContext context) => const SettingsScreen(),
  '/forms': (BuildContext context) => const FormScreen(),
  '/input-fields': (BuildContext context) => InputScreen(data: ModalRoute.of(context)?.settings.arguments),
  '/selections': (BuildContext context) => SelectionScreen(),
  '/calendar': (BuildContext context) => CalendarScreen(),
  '/slideshow': (BuildContext context) => CarouselScreen(),
  '/modals': (BuildContext context) => ModalScreen(),
  '/api-calls': (BuildContext context) => NetworkRequestScreen(),
};

final routeHandler = (RouteSettings settings) {
  final String? routeName = settings.name;
  final WidgetBuilder? screenBuilder = screenRoutes[routeName];

  if (screenBuilder != null) {
    final Route<dynamic> route = MaterialPageRoute(
      builder: (BuildContext context) => screenBuilder(context),
      settings: settings,
    );
    return route;
  }
  return null;
};

页面跳转实现

执行路由跳转并传递数据：

Navigator.of(context).pushNamed("/item-detail", arguments: {'itemId': 'product_123'});

接收页面需要配置参数处理逻辑：

class ItemDetailScreen extends StatelessWidget {
  final dynamic data;
  
  const ItemDetailScreen({Key? key, this.data}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Item Details"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Received Data: ${data != null ? data['itemId'] : 'No Data'}\nClick to Return to Home"),
          onPressed: () {
            Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(builder: (BuildContext context) => const DashboardScreen()),
              (Route<dynamic> route) => false,
            );
          },
        ),
      ),
    );
  }
}

页面替换操作

有两种方式可以替换当前路由：

// 方法一：使用 Navigator 实例
Navigator.of(context).pushReplacementNamed("/item-detail",
    arguments: {"message": "Page replacement: products -> details, previous destroyed"});

// 方法二：使用静态方法
Navigator.pushReplacementNamed(context, '/item-detail',
    arguments: {"message": "Page replacement: products -> details, previous destroyed"});