如何在Flutter中添加自定义信息窗口

Question

我想在标记上添加这个自定义小部件。我已经设计好了这个小部件，但是我不知道如何将其定位到标记上。

我该如何自定义它以始终出现在信息窗口位置。它被包裹在一个定位小部件中，但是我无法将其放置在信息窗口位置。

Stack(
        children: [
          AnimatedPositioned(
            bottom: 0.0,
            duration: Duration(milliseconds: 200),
            child: Container(
              padding: EdgeInsets.only(top:
              30,left: 15,
                  right: 15,bottom: 10),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(0),
                      topLeft: Radius.circular(0),
                      bottomRight: Radius.circular(5),
                      bottomLeft: Radius.circular(5))),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    '500 USD',
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontFamily: 'Roboto',
                      color: customBlue,
                      fontSize: _sizeConfig.textSize(
                        context,
                        Converters.configSize(14),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  RatingBar.builder(
                    initialRating: 3.5,
                    unratedColor: Colors.grey
                        .withOpacity(0.5),
                    minRating: 1,
                    allowHalfRating: true,
                    itemSize: 20,
                    direction: Axis.horizontal,
                    itemCount: 5,
                    itemPadding: EdgeInsets.symmetric(horizontal: 0.0),
                    itemBuilder: (context, _) => Icon(
                      Icons.star,
                      color: customRed,
                    ),
                  ),
                ],
              ),
              width: 163,
            ),
          )
        ],
      ),

- custom apps

---

你使用什么类型的映射？请说明。 - Islomkhuja Akhrarov

谷歌地图，伙计。 - custom apps

很遗憾，没有简单的方法来实现它，但是有一个完整的教程，包括创建小部件图像和将其用作标记图标。请查看以下链接：https://medium.com/swlh/using-material-icons-as-custom-google-map-markers-in-flutter-3e854de22e2 - OlegBezr

你找到解决方案了吗？我需要在我的应用程序中使用相同的功能。 - Apoorv pandey

Answer 1

请使用自定义包：

custom_info_window: ^1.0.1

clippy_flutter 2.0.0

这些包与it技术有关。

Stack(
      children: [
          markers: _markers,
          myLocationEnabled: true,
          zoomControlsEnabled: false,
          gestureRecognizers: {
            Factory<OneSequenceGestureRecognizer>(
                () => ScaleGestureRecognizer()),
          }, 
        ),
        CustomInfoWindow(
          controller: _customInfoWindowController,
          height: 150,
          width: 150,
          offset: 50,
        ),
      ],
    ),

    _markers.add(
  Marker(
    markerId: const MarkerId("marker_id"),
    position: _latLng,
    onTap: () {
      _customInfoWindowController.addInfoWindow!(
        Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Bevel(
              cutLength: 10,
              child: Container(
                width: 120.0,
                height: 140.0,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(6)),
    ],),

- Muhammad Mohsin

Answer 2

请尝试使用custom_info_window。这是一个允许基于小部件自定义信息窗口的包，适用于google_maps_flutter。使用此功能，您可以将小部件移动到地图标记顶部的信息窗口中。

- Abhishek Kumar

---

面对这个问题， [ERROR:flutter/shell/common/shell.cc（103）] Dart未处理的异常：NoSuchMethodError：方法“call”在null上被调用。 - Apoorv pandey

Answer 3

在 Google 地图插件中，没有易于使用您的小部件作为标记的 API。

但是有一些技巧。您应该将小部件导出为图像，并通过 BitmapDescriptor.fromBytes 传递它。

如何执行此操作的有用链接：

小部件转图像

将转换为图像的小部件传递给 Google 地图

如果看起来像样板代码，您可以使用由 leaflet 开发的 flutter_map 插件

flutter_map

- Islomkhuja Akhrarov