Flutter地球仪展示插件flutter_earth_globe的使用

概述

Flutter Earth Globe 是一个用于Flutter应用程序的交互式3D球体小部件。这个小部件设计简单易用且高度可定制，适用于任何需要视觉上吸引人的星球表示的应用程序。此包灵感来源于 Globe.GL 和 Sphere。

Live Demo

功能

• 3D交互式地球：一个逼真且互动的地球3D模型。
• 可自定义外观：选项包括颜色、纹理等。
• 缩放和旋转：用户可以通过手势进行缩放和旋转。
• 点支持：可以在地球上放置可自定义的点。
• 连接支持：创建不同坐标之间的连接。
• 自定义标签支持：为点或连接创建自定义小部件标签。
• 响应式设计：确保与各种设备和屏幕尺寸兼容。

安装

要安装 Flutter Earth Globe，请按照以下步骤操作：

1. 将包添加到您的Flutter项目的 pubspec.yaml 文件中：

   dependencies:
     flutter_earth_globe: ^[latest_version]
   

   或者直接运行：

   flutter pub add flutter_earth_globe
   

2. 在Dart代码中导入该包：

   import 'package:flutter_earth_globe/flutter_earth_globe.dart';
   

使用示例

下面是一个将 Flutter Earth Globe 集成到Flutter应用程序中的基本示例：

import 'package:flutter/material.dart';
import 'package:flutter_earth_globe/flutter_earth_globe.dart';
import 'package:flutter_earth_globe/flutter_earth_globe_controller.dart';

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

class MyApp extends StatelessWidget {
  late FlutterEarthGlobeController _controller;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Earth Globe Example'),
        ),
        body: SafeArea(
          child: FlutterEarthGlobe(
            controller: FlutterEarthGlobeController(
              rotationSpeed: 0.05,
              isBackgroundFollowingSphereRotation: true,
              background: Image.asset('assets/2k_stars.jpg').image,
              surface: Image.asset('assets/2k_earth-day.jpg').image,
            ),
            radius: 120,
          ),
        ),
      ),
    );
  }
}

自定义

创建点列表并将其添加到地球仪

final FlutterEarthGlobeController _controller = FlutterEarthGlobeController();
List<Point> points = [
  Point(
      id: '1',
      coordinates: const GlobeCoordinates(51.5072, 0.1276),
      label: 'London',
      isLabelVisible: true,
      style: const PointStyle(color: Colors.red, size: 6)),
  // ... 其他点
];

for (var point in points) {
  _controller.addPoint(point);
}

加载跟随旋转的背景图像和球体表面纹理图像

final FlutterEarthGlobeController _controller = FlutterEarthGlobeController();
@override
initState(){
    _controller.onLoaded = () {
        _controller.loadBackground(Image.asset('assets/2k_stars.jpg').image,
            followsRotation: true);
        _controller.loadSurface(Image.asset('assets/2k_earth-day.jpg').image);
    };

    super.initState();
}

更改球体样式

final FlutterEarthGlobeController _controller = FlutterEarthGlobeController();
_controller.changeSphereStyle(SphereStyle(
      shadowColor: Colors.orange.withOpacity(0.8),
      shadowBlurSigma: 20));

贡献者和支持

感谢所有为本项目做出贡献的人。如果您想贡献，请参阅如何贡献部分。您也可以通过在pub上点赞、在GitHub上加星以及报告遇到的bug来支持这个库。

许可证

本项目采用MIT许可证，详情请参阅LICENSE文件。

希望这些信息能帮助您更好地理解和使用 flutter_earth_globe 插件！如果有任何问题或需要进一步的帮助，请随时提问。