如何在Flutter中同时实现device_preview和auto_route包

在Flutter中同时实现device_preview和auto_route包，可以按照以下步骤进行操作：

首先，确保你已经在Flutter项目中引入了device_preview和auto_route包。可以在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  device_preview: ^0.7.4
  auto_route: ^2.2.0

然后运行flutter pub get命令来获取依赖包。

在Flutter应用程序的入口文件（通常是main.dart）中，导入所需的包：

import 'package:flutter/material.dart';
import 'package:device_preview/device_preview.dart';
import 'package:auto_route/auto_route.dart';

创建一个继承自AutoRouterWidget的自定义Widget，并在其中配置路由：

class MyApp extends AutoRouterWidget {
  @override
  List<RouteConfig> get routes => [
    // 定义你的路由配置
    // 例如：
    RouteConfig(HomeRoute.name, path: '/', page: HomeRoute()),
    RouteConfig(ProfileRoute.name, path: '/profile', page: ProfileRoute()),
    // ...
  ];
  
  @override
  Widget wrappedRoute(BuildContext context, AutoRouteDelegate delegate, RouteSettings settings) {
    return DevicePreview(
      enabled: true, // 启用device_preview
      builder: (context) => MaterialApp.router(
        routerDelegate: delegate,
        routeInformationParser: delegate.defaultRouteParser(),
      ),
    );
  }
}