flutter - 如何添加自定义信息窗口 flutter

标签 flutter google-maps dart

我想将此自定义小部件添加到我的标记中。我已经设计了小部件,但我不知道如何将它放置在标记上。
我如何自定义它以始终出现在信息窗口位置。它包裹在一个定位的小部件中,但我无法将它放在信息窗口位置。
marker image

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_info_window .这是一个允许 google_maps_flutter 基于小部件的自定义信息窗口的包。通过使用它,您将能够在 map 标记的顶部移动像信息窗口这样的小部件。

关于flutter - 如何添加自定义信息窗口 flutter ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66921735/

相关文章:

dart - 如何根据背景图像更改文本颜色 - Flutter

flutter - 在 flutter 中注册用户生物识别指纹

javascript - 如何在纯原生 JavaScript 中隐藏 API key ?

dart - 无法使用 Homebrew 将 Dart SDK 从 2.18.7 升级到 2.19.0

flutter - 如何监听字符串变量的变化并在发生变化时执行操作?

flutter - 如何在运行时枚举 flutter 小部件树?

javascript - api google maps javascript v3 中的 InfoWindow

javascript - 对InfoWindow使用mouseover和mouseout会导致InfoWindow闪烁并连续触发mouseover和mouseout事件

dart - 使用 Dart 动态创建用于下载的文本文件

android - Flutter Webview 在点击功能的抽屉导航中不起作用