Flutter自定义小部件标记插件the_widget_marker的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter自定义小部件标记插件the_widget_marker的使用

概述

一个将Widget、本地图片、网络图片、SVG文件转换为BitmapDescriptor的包，可以用于google_maps_flutter中的图标标记。

开始使用

添加依赖项：

dependencies:
  the_widget_marker: ^1.0.0

添加圆形边框的网络图片标记图标

onPressed: () async {
  markers.add(
    Marker(
      icon: await MarkerIcon.downloadResizePictureCircle(
        'https://thegpscoordinates.net/photos/la/tehran_iran_5u679ezi8f.jpg',
        size: 150,
        addBorder: true,
        borderColor: Colors.white,
        borderSize: 15),
      ),
    );
}

其他函数的工作方式相同

除了widgetTo marker外，其他函数的工作方式相同。

Widget To Marker

MyMap类持有您的GoogleMap widget

class MyMap extends StatefulWidget {
  const MyMap({Key? key}) : super(key: key);
  [@override](/user/override)
  _MyMapState createState() => _MyMapState();
}

class _MyMapState extends State<MyMap> {
  Set<Marker> _markers = <Marker>{};

  // 宣布全局键
  final GlobalKey globalKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Stack(
            children: [
              // 将您的组件添加到相同的组件树中
              // 在Stack中添加您的Google Map
              // 在Google Map之前声明您的标记
              // 将全局键传递给您的组件
              MyMarker(globalKey),

              Positioned.fill(
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                      target: LatLng(32.4279, 53.6880), zoom: 15),
                  markers: _markers,
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton.extended(
            label: FittedBox(child: Text('Add Markers')),
            onPressed: () async {
              // 调用widgetToIcon函数并传递相同的全局键
              _markers.add(
                Marker(
                  markerId: MarkerId('circleCanvasWithText'),
                  icon: await MarkerIcon.widgetToIcon(globalKey),
                  position: LatLng(35.8400, 50.9391),
                ),
              );
              setState(() {});
            },
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        ),
      ],
    );
  }
}

MyMarker类持有您想要将其转换为标记图标的组件

class MyMarker extends StatelessWidget {
  // 宣布全局键并通过构造函数获取它
  MyMarker(this.globalKeyMyWidget);
  final GlobalKey globalKeyMyWidget;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 将您的组件包裹在RepaintBoundary中，并通过构造函数传递全局键
    return RepaintBoundary(
      key: globalKeyMyWidget,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 250,
            height: 180,
            decoration: BoxDecoration(color: Colors.black, shape: BoxShape.circle),
          ),
          Container(
            width: 220,
            height: 150,
            decoration: BoxDecoration(color: Colors.amber, shape: BoxShape.circle),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.accessibility, color: Colors.white, size: 35),
                Text('Widget', style: TextStyle(color: Colors.white, fontSize: 25)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter自定义小部件标记插件the_widget_marker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义小部件标记插件the_widget_marker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用自定义小部件标记插件 the_widget_marker 的示例代码。这个示例将展示如何集成并使用该插件来标记特定的Widget。

首先，确保你已经在 pubspec.yaml 文件中添加了 the_widget_marker 依赖：

dependencies:
  flutter:
    sdk: flutter
  the_widget_marker: ^latest_version  # 请将latest_version替换为插件的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，我们创建一个简单的Flutter应用，并展示如何使用 the_widget_marker 插件。

1. 导入必要的包

在你的 Dart 文件中导入 the_widget_marker 包：

import 'package:flutter/material.dart';
import 'package:the_widget_marker/the_widget_marker.dart';

2. 创建一个标记自定义小部件

假设我们有一个简单的自定义小部件 MyCustomWidget，我们希望在界面上标记它。

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Hello, I am a custom widget!',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

3. 使用 WidgetMarker 包装你的自定义小部件

在你的主应用或需要标记的页面上，使用 WidgetMarker 包装 MyCustomWidget。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget Marker Example'),
        ),
        body: WidgetMarker(
          key: ValueKey('my_custom_widget_key'),  // 使用一个唯一的Key来标识这个小部件
          widget: MyCustomWidget(),
          markerOptions: MarkerOptions(
            markerColor: Colors.red,  // 标记颜色
            markerWidth: 4.0,         // 标记线条宽度
            markerStyle: MarkerStyle.rectangle, // 标记样式，可以是rectangle或circle
          ),
        ),
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的Flutter应用，MyCustomWidget 将会被一个红色的标记包围（假设你选择了矩形样式和红色标记）。

注意事项

  • WidgetMarker 的 key 属性应该是唯一的，以确保标记能够正确应用。
  • MarkerOptions 提供了多种自定义选项，比如标记颜色、线条宽度和样式等。
  • 确保 the_widget_marker 插件的版本与Flutter SDK兼容。

这个示例展示了如何在Flutter中使用 the_widget_marker 插件来标记自定义小部件。希望这对你有所帮助！

回到顶部