Flutter自定义信息窗口插件custom_info_window的使用

Custom Info Window 是一个基于Flutter Widget的自定义信息窗口，专为 google_maps_flutter 插件设计。它允许开发者在地图上添加自定义样式的信息窗口，以增强用户体验。

示例展示

上述GIF展示了如何通过点击地图上的标记来显示和隐藏自定义信息窗口。

完整示例代码

依赖安装

首先，在您的 pubspec.yaml 文件中添加 custom_info_window 和 google_maps_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_info_window: ^latest_version
  google_maps_flutter: ^latest_version

请将 ^latest_version 替换为实际的最新版本号。

示例代码

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:custom_info_window/custom_info_window.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomInfoWindowExample(),
    );
  }
}

class CustomInfoWindowExample extends StatefulWidget {
  @override
  _CustomInfoWindowExampleState createState() => _CustomInfoWindowExampleState();
}

class _CustomInfoWindowExampleState extends State<CustomInfoWindowExample> {
  CustomInfoWindowController _customInfoWindowController = CustomInfoWindowController();

  final LatLng _latLng = LatLng(28.7041, 77.1025); // Example coordinates (Delhi)
  final double _zoom = 15.0;

  Set<Marker> _markers = {};

  @override
  void dispose() {
    _customInfoWindowController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Adding a marker to the map with an onTap event that shows the info window.
    _markers.add(
      Marker(
        markerId: MarkerId("marker_id"),
        position: _latLng,
        onTap: () {
          _customInfoWindowController.addInfoWindow(
            Column(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.account_circle,
                            color: Colors.white,
                            size: 30,
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            "I am here",
                            style: Theme.of(context).textTheme.headline6?.copyWith(color: Colors.white),
                          )
                        ],
                      ),
                    ),
                    width: double.infinity,
                    height: double.infinity,
                  ),
                ),
                Triangle.isosceles(
                  edge: Edge.BOTTOM,
                  child: Container(
                    color: Colors.blue,
                    width: 20.0,
                    height: 10.0,
                  ),
                ),
              ],
            ),
            _latLng,
          );
        },
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Info Window Example'),
        backgroundColor: Colors.red,
      ),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            onTap: (position) {
              _customInfoWindowController.hideInfoWindow();
            },
            onCameraMove: (position) {
              _customInfoWindowController.onCameraMove();
            },
            onMapCreated: (GoogleMapController controller) async {
              _customInfoWindowController.googleMapController = controller;
            },
            markers: _markers,
            initialCameraPosition: CameraPosition(
              target: _latLng,
              zoom: _zoom,
            ),
          ),
          CustomInfoWindow(
            controller: _customInfoWindowController,
            height: 75,
            width: 150,
            offset: 50,
          ),
        ],
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用程序，其中包含一个带有自定义信息窗口的地图视图。当用户点击地图上的标记时，会显示一个蓝色背景的自定义信息窗口，并且可以通过点击地图的其他地方来关闭该窗口。

请注意，为了确保最佳兼容性和性能，请始终使用最新的稳定版本的 custom_info_window 和 google_maps_flutter 插件。