Flutter气象数据获取插件open_meteo的使用

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

Flutter气象数据获取插件open_meteo的使用

Open-Meteo API SDK 简介

Open-Meteo API SDK 是一个简单、快速、异步的Dart/Flutter包，用于访问Open-Meteo API。所有来自Open-Meteo API的功能都已实现（某些功能有限）。在项目中使用此包之前，请务必阅读Open Meteo的使用条款。

主要特性

  • 支持Open-Meteo提供的9大类API：WeatherApi, HistoricalApi, EnsembleApi, ClimateApi, MarineApi, AirQualityApi, GeocodingApi, ElevationApi 和 FloodApi
  • 时间参数采用DateTime对象
  • 多个参数有枚举表示形式
  • 异常处理机制确保API错误响应时抛出异常
  • 为Web平台提供requestJson()方法作为Int64类型不支持的解决方案

使用示例

以下是一个完整的Flutter应用示例，展示如何使用open_meteo插件获取指定位置的小时温度数据，并将其显示在一个简单的用户界面上。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<double>? temperatures;
  bool isLoading = false;

  Future<void> fetchWeatherData() async {
    setState(() {
      isLoading = true;
    });

    try {
      final weather = WeatherApi();
      final response = await weather.request(
        latitude: 52.52, // Berlin, Germany
        longitude: 13.41,
        hourly: {WeatherHourly.temperature_2m},
        temperatureUnit: TemperatureUnit.celsius,
      );

      final data = response.hourlyData[WeatherHourly.temperature_2m]!;
      setState(() {
        temperatures = data.values.toList();
      });
    } catch (e) {
      print("Failed to fetch weather data: $e");
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    fetchWeatherData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (isLoading)
              CircularProgressIndicator()
            else if (temperatures != null && temperatures!.isNotEmpty)
              Text(
                "Next few hours' temperatures:\n${temperatures!.join(', ')}",
                style: Theme.of(context).textTheme.headline6,
                textAlign: TextAlign.center,
              )
            else
              Text('No data available.'),
          ],
        ),
      ),
    );
  }
}

运行结果

该应用启动后会自动获取柏林未来几个小时的气温数据，并以逗号分隔的形式显示在屏幕上。如果数据加载中，则显示一个进度指示器；如果没有获取到数据，则提示“无可用数据”。

注意事项

  • 时间范围：可以根据需要调整startDate和endDate来获取特定时间段的数据。
  • 单位转换：通过设置temperatureUnit参数可以选择摄氏度或华氏度。
  • 异常处理：在实际开发中应更加细致地处理异常情况，例如网络请求失败等。
  • Web平台兼容性：对于Web平台，由于Int64类型的限制，建议使用requestJson()方法代替默认的request()方法。

希望这个指南能帮助你更好地理解和使用open_meteo插件！如果有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter气象数据获取插件open_meteo的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter气象数据获取插件open_meteo的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 open_meteo 插件来获取气象数据的 Flutter 代码示例。open_meteo 是一个 Flutter 插件，用于从 OpenMeteo API 获取气象数据。

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

dependencies:
  flutter:
    sdk: flutter
  open_meteo: ^最新版本号  # 请替换为当前最新版本号

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

接下来，你可以使用以下代码来配置和使用 open_meteo 插件：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late OpenMeteoClient _client;
  late Future<WeatherData?> _futureWeatherData;

  @override
  void initState() {
    super.initState();
    // 配置 OpenMeteoClient，替换为你的 API Key
    final String apiKey = '你的API_KEY';
    _client = OpenMeteoClient(apiKey: apiKey);

    // 获取当前位置的气象数据
    _futureWeatherData = _getCurrentWeatherData();
  }

  Future<WeatherData?> _getCurrentWeatherData() async {
    try {
      // 你可以根据需要调整这些参数
      final CurrentWeatherRequest request = CurrentWeatherRequest(
        latitude: 48.8566,  // 巴黎的纬度
        longitude: 2.3522,  // 巴黎的经度
      );

      final CurrentWeatherResponse response = await _client.getCurrentWeather(request);
      return response.data;
    } catch (e) {
      print('Error fetching weather data: $e');
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OpenMeteo Demo'),
        ),
        body: Center(
          child: FutureBuilder<WeatherData?>(
            future: _futureWeatherData,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else if (snapshot.hasData) {
                final WeatherData? weatherData = snapshot.data;
                if (weatherData != null) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('Temperature: ${weatherData.temperature.value}°C'),
                      Text('Humidity: ${weatherData.humidity.value}%'),
                      Text('Pressure: ${weatherData.pressure.value} hPa'),
                      // 根据需要添加更多字段
                    ],
                  );
                } else {
                  return Text('No weather data');
                }
              } else {
                return Text('No data');
              }
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 配置了 OpenMeteoClient 并传入了 API Key。
  2. 创建了一个 CurrentWeatherRequest 对象，指定了经纬度（这里以巴黎为例）。
  3. 调用 _client.getCurrentWeather(request) 方法获取当前天气数据。
  4. 使用 FutureBuilder 来处理异步请求，并在 UI 中显示天气数据。

请注意，你需要将 '你的API_KEY' 替换为你从 OpenMeteo 获取的实际 API Key。另外，根据需要，你可以调整请求参数以获取特定位置或特定时间范围的气象数据。

这个示例展示了如何使用 open_meteo 插件来获取和显示当前天气数据。你可以根据需要进一步扩展此示例，例如获取并显示未来几天的天气预报、处理更多气象数据字段等。

回到顶部