gmaps_nav_hud_frame 是一个用于 Flutter 的插件，它提供了一个导航 HUD（Head-Up Display）框架，通常用于在 Google 地图上显示导航信息。这个插件可以帮助开发者在应用中集成类似于汽车导航系统的 HUD 界面，提供实时的导航指示。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 gmaps_nav_hud_frame 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  gmaps_nav_hud_frame: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本使用

1. 导入插件：

   在你的 Dart 文件中导入 gmaps_nav_hud_frame 插件：

   import 'package:gmaps_nav_hud_frame/gmaps_nav_hud_frame.dart';

2. 创建 HUD 实例：

   你可以通过 GmapsNavHudFrame 类来创建一个 HUD 实例，并将其添加到你的 UI 中。

   class NavigationScreen extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Navigation HUD'),
         ),
         body: Center(
           child: GmapsNavHudFrame(
             onHudTapped: () {
               // 处理 HUD 点击事件
               print('HUD tapped!');
             },
             hudData: HudData(
               distance: '1.5 km',
               nextTurn: 'Turn left',
               timeToDestination: '10 min',
               streetName: 'Main Street',
             ),
           ),
         ),
       );
     }
   }

3. 配置 HUD 数据：

   HudData 类用于配置 HUD 中显示的数据。你可以设置距离、下一个转弯方向、到达目的地的时间以及当前街道名称等信息。

   HudData hudData = HudData(
     distance: '1.5 km',
     nextTurn: 'Turn left',
     timeToDestination: '10 min',
     streetName: 'Main Street',
   );

4. 处理 HUD 点击事件：

   你可以通过 onHudTapped 回调来处理用户点击 HUD 的事件。

   GmapsNavHudFrame(
     onHudTapped: () {
       // 处理 HUD 点击事件
       print('HUD tapped!');
     },
     hudData: hudData,
   );

自定义 HUD 样式

gmaps_nav_hud_frame 插件允许你自定义 HUD 的样式。你可以通过 GmapsNavHudFrame 的构造函数参数来设置不同的样式属性，例如背景颜色、文本颜色、字体大小等。

GmapsNavHudFrame(
  onHudTapped: () {
    print('HUD tapped!');
  },
  hudData: hudData,
  backgroundColor: Colors.black.withOpacity(0.7),
  textColor: Colors.white,
  fontSize: 16.0,
);

集成 Google 地图

gmaps_nav_hud_frame 插件通常与 Google 地图插件一起使用。你可以使用 google_maps_flutter 插件来显示地图，并在其上叠加 HUD。

import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map with HUD'),
      ),
      body: Stack(
        children: [
          GoogleMap(
            onMapCreated: (controller) {
              setState(() {
                mapController = controller;
              });
            },
            initialCameraPosition: CameraPosition(
              target: LatLng(37.7749, -122.4194), // 旧金山
              zoom: 14.0,
            ),
          ),
          Positioned(
            bottom: 20,
            left: 20,
            right: 20,
            child: GmapsNavHudFrame(
              onHudTapped: () {
                print('HUD tapped!');
              },
              hudData: HudData(
                distance: '1.5 km',
                nextTurn: 'Turn left',
                timeToDestination: '10 min',
                streetName: 'Main Street',
              ),
            ),
          ),
        ],
      ),
    );
  }
}