【问题标题】:How to add custom info window flutter如何添加自定义信息窗口颤振
【发布时间】:2021-06-29 11:14:16
【问题描述】:

我想将此自定义小部件添加到我的标记中。我已经设计了小部件,但我不知道如何将它定位在标记上。

如何自定义它以始终显示在信息窗口位置。它包含在定位的小部件中,但我无法将其放置在信息窗口位置。

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,
            ),
          )
        ],
      ),

【问题讨论】:

  • 你用什么地图?请提及
  • 谷歌地图兄弟,
  • 不幸的是,没有简单的方法来实现它,但是有一个完整的教程,包括创建image from a widget 并将其用作标记的图标。看看:medium.com/swlh/…
  • 您是否找到需要与我的应用程序具有相同功能的解决方案。 @customapps

标签: flutter google-maps dart


【解决方案1】:

请尝试custom_info_window。它是一个允许 google_maps_flutter 基于小部件的自定义信息窗口的包。通过使用它,您将能够移动地图标记顶部的信息窗口等小部件。

【讨论】:

  • 面对这个问题,[ERROR:flutter/shell/common/shell.cc(103)] Dart Unhandled Exception: NoSuchMethodError: The method 'call' was called on null.
【解决方案2】:

没有简单的 api 可以将您的小部件用作谷歌地图插件中的标记。

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

有用的链接怎么做:

Widget to Image

Pass widget converted to Image to Google map

如果它看起来像样板代码,您可以通过传单使用flutter_map插件

flutter_map

【讨论】:

    猜你喜欢
    • 2015-12-17
    • 2020-04-24
    • 2012-07-17
    • 2018-11-06
    • 2017-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多