Flutter世界国家地图展示插件countries_world_map的使用

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

Flutter世界国家地图展示插件countries_world_map的使用

简介

countries_world_map 是一个Flutter包，它提供了一个易于实现的世界地图（或任何其他国家的地图），具有高度的自定义性。"自定义"意味着可以更改国家/州/省的颜色，并且当点击地图上的某个区域时，会触发回调函数。

Example

在线示例

支持的国家

以下是部分支持的国家列表：

国家 ISO 是否支持
Afghanistan AF ❌
Albania AL ❌
Algeria DZ ❌
Andorra AD ✅
Angola AO ✅
Argentina AR ✅
Armenia AM ✅
Australia AU ✅
Austria AT ✅
Azerbaijan AZ ✅
… … …

完整支持的国家列表请参考 在线示例 或者查看表格中的完整内容。

使用方法

主要Widget

主要的Widget是 SimpleMap()，它需要至少提供绘制地图的指令字符串。对于所有支持的国家，有两个类：SMap...() 和 SMap...Colors()。第一个类仅包含一个静态字符串，该字符串包含 SimpleMap widget 的绘制指令。第二个类包含与区域ID匹配的颜色属性。

例如：

  • 西班牙有以下两个类：SMapSpain() 和 SMapSpainColors()
  • 墨西哥有以下两个类：SmapMexico() 和 SMapMexicoColors()
  • 世界地图有以下两个类：SMapWorld() 和 SMapWorldColors()

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 countries_world_map 插件来显示一个可交互的世界地图，并在点击某个国家时打印出其ID和名称。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'World Map Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('World Map'),
      ),
      body: Center(
        child: InteractiveViewer(
          maxScale: 75,
          child: SimpleMap(
            instructions: SMapWorld.instructions,
            defaultColor: Colors.grey.shade300,
            colors: SMapWorldColors(
              uS: Colors.green, // 美国绿色
              cN: Colors.red,   // 中国红色
              ru: Colors.blue,  // 俄罗斯蓝色
            ).toMap(),
            callback: (id, name, tapDetails) {
              print('Tapped on $name with ID: $id');
            },
          ),
        ),
      ),
    );
  }
}

关键点解释

  • InteractiveViewer：用于实现缩放和平移功能。
  • SimpleMap：核心的地图组件，通过 instructions 参数指定地图绘制指令，defaultColor 设置默认颜色，colors 设置特定国家的颜色，callback 处理点击事件。
  • SMapWorldColors：用于设置特定国家的颜色。

性能提示

由于某些地图文件较大，重新构建这些小部件可能会比较昂贵。默认情况下，SimpleMap 使用了 RepaintBoundary 来防止不必要的重绘。如果改变国家颜色并调用 setState()，则小部件将重新绘制。

使用场景

此包可用于可视化数据，例如通过不同的颜色阴影来表示不同地区的数据值。当用户点击某个区域时，可以弹出详细信息的底部弹窗。

UI 提示

  1. 将世界地图包裹在 InteractiveViewer 中，以便可以缩放和平移特定国家。
  2. 将世界地图设置为可用宽度的92%，以使其看起来更居中。

贡献

如果您想帮助改进这个包，可以通过创建问题、拉取请求等方式参与。有关更多信息，请联系 hello@simplewidgets.dev。

希望这些信息对您有所帮助！如果有任何问题，欢迎随时提问。


更多关于Flutter世界国家地图展示插件countries_world_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter世界国家地图展示插件countries_world_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用countries_world_map插件来展示世界国家地图的代码示例。这个插件通常用于在应用中展示世界地图，并可以对特定国家进行高亮显示或其他交互操作。

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

dependencies:
  flutter:
    sdk: flutter
  countries_world_map: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用countries_world_map插件。以下是一个简单的示例，展示如何在屏幕上显示世界国家地图，并对点击事件进行处理：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'World Map Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WorldMapScreen(),
    );
  }
}

class WorldMapScreen extends StatefulWidget {
  @override
  _WorldMapScreenState createState() => _WorldMapScreenState();
}

class _WorldMapScreenState extends State<WorldMapScreen> {
  final MapController _controller = MapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('World Map Demo'),
      ),
      body: Center(
        child: WorldMap(
          controller: _controller,
          onTap: (Country country) {
            // 在这里处理点击事件，例如显示国家信息
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('You tapped: ${country.name}'),
              ),
            );
          },
          // 可以根据需要自定义地图样式
          borderColor: Colors.grey,
          borderWidth: 1.0,
          selectedCountries: {
            'US': true, // 例如，默认高亮显示美国
          },
          selectedCountryColor: Colors.blue,
          unselectedCountryColor: Colors.grey[300]!,
        ),
      ),
    );
  }
}

在这个示例中：

  1. WorldMap是显示世界地图的主要组件。
  2. MapController用于控制地图的交互（虽然在这个简单示例中没有使用到它的全部功能）。
  3. onTap回调用于处理地图上的点击事件。当用户点击某个国家时，会显示一个SnackBar，显示被点击国家的名称。
  4. selectedCountries参数用于指定默认高亮显示的国家。在这个例子中，美国（‘US’）被默认高亮显示。
  5. selectedCountryColor和unselectedCountryColor参数用于自定义选中国家和未选中国家的颜色。

你可以根据实际需求进一步自定义和扩展这个示例，例如添加更多的交互功能、从API获取数据并动态更新地图等。

回到顶部