Flutter天气查询插件open_weather_client的使用

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

Flutter天气查询插件open_weather_client的使用

open_weather_client 是一个非官方的Dart包，用于轻松使用 OpenWeatherMap API。该插件目前支持通过城市名称、地理坐标（纬度、经度）和邮政编码（邮政编码和国家代码）获取天气数据。此外，插件还支持5天天气预报。

特性

单位类型

  • WeatherUnits.STANDARD：华氏温度
  • WeatherUnits.METRIC：摄氏温度
  • WeatherUnits.IMPERIAL：开尔文温度

语言支持

  • Languages.GERMAN：德语
  • 默认语言为 Languages.ENGLISH：英语

安装

要安装依赖项，请在 pubspec.yaml 文件中添加 open_weather_client：

dependencies:
  open_weather_client: ^latest_version

使用

预构建函数获取当前天气

在使用插件之前，你需要从 OpenWeatherMap 获取API密钥。插件仅使用免费的端点。

初始化

import 'package:open_weather_client/open_weather.dart';

...

OpenWeather openWeather = OpenWeather(apiKey: 'YOUR_API_KEY');

通过城市名称获取天气

final String _key = 'YOUR_API_KEY';
final String _cityName = 'Florida';
final Languages _language = Languages.ENGLISH;

WeatherData weatherData = await openWeather
    .currentWeatherByCityName(
        cityName: _cityName, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err));

通过地理坐标获取天气

final double _latitude = 52.3545828;
final double _longitude = 4.7638781;

WeatherData weatherData = await openWeather
    .currentWeatherByLocation(
        latitude: _latitude, 
        longitude: _longitude, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err));

通过邮政编码获取天气

final int _zipCode = 3512;
final String _countryCode = 'NL';

WeatherData weatherData = await openWeather
    .currentWeatherByZipCode(
        zipCode: _zipCode, 
        countryCode: _countryCode, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err));

访问值

获取到的天气数据可以通过以下类访问：

  • Coordinates 类包含：

    • lat：城市地理位置的纬度
    • lon：城市地理位置的经度

  • Details 类包含：

    • id：天气状况ID
    • weatherShortDescription：天气参数组（如雨、雪、极端等）
    • weatherLongDescription：天气状况描述
    • icon：图标ID

  • Temperature 类包含：

    • currentTemperature：当前温度
    • feelsLike：体感温度
    • tempMin：最低温度
    • tempMax：最高温度
    • pressure：大气压
    • humidity：湿度

  • Wind 类包含：

    • speed：风速
    • deg：风向
    • gust：阵风

示例代码：

WeatherData weatherData = await openWeather
    .currentWeatherByCityName(
        cityName: _cityName, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err))
    .then((data) {
  print(data.details.first.weatherShortDescription);
  print(data.name.toString());
  print(data.temperature.currentTemperature);
  print(data.wind.speed);
});

预构建小部件获取当前天气

你也可以使用内置的小部件来显示天气信息：

通过城市名称

OpenWeatherByCity(
  apiKey: _key,
  cityName: _cityName,
  weatherUnits: WeatherUnits.METRIC,
  color: Colors.white,
  language: Languages.ENGLISH
)

通过地理坐标

OpenWeatherByLocation(
  apiKey: _key,
  latitude: _latitude,
  longitude: _longitude,
  weatherUnits: WeatherUnits.METRIC,
  color: Colors.white,
  language: Languages.ENGLISH
)

通过邮政编码

OpenWeatherByZipCode(
  apiKey: _key,
  zipCode: _zipCode,
  countryCode: _countryCode,
  weatherUnits: WeatherUnits.METRIC,
  color: Colors.white,
  language: Languages.ENGLISH
)

预构建函数获取5天天气预报

通过城市名称

WeatherForecastData weatherData = await openWeather
    .fiveDaysWeatherForecastByCityName(
        cityName: _cityName, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err));

通过地理坐标

WeatherForecastData weatherData = await openWeather
    .fiveDaysWeatherForecastByLocation(
        latitude: _latitude, 
        longitude: _longitude, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err));

通过邮政编码

WeatherForecastData weatherData = await openWeather
    .fiveDaysWeatherForecastByZipCode(
        zipCode: _zipCode, 
        countryCode: _countryCode, 
        weatherUnits: WeatherUnits.METRIC, 
        language: _language)
    .catchError((err) => print(err));

示例项目

以下是一个简单的示例项目，展示了如何使用预构建的小部件来显示天气信息：

import 'package:example/screens/prebuilt_widgets_demo_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PrebuiltWidgetsScreen(),
    );
  }
}

更多详细信息和示例实现，请参阅 example 文件夹。


更多关于Flutter天气查询插件open_weather_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter天气查询插件open_weather_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用open_weather_client插件来查询天气信息的示例代码。这个插件允许你通过OpenWeatherMap API获取实时的天气数据。

首先，你需要在你的pubspec.yaml文件中添加open_weather_client依赖：

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

然后，运行flutter pub get来安装依赖。

接下来，你需要获取一个OpenWeatherMap API密钥。你可以通过访问OpenWeatherMap官网并注册一个账户来获取免费的API密钥。

下面是一个完整的Flutter应用示例，展示了如何使用open_weather_client插件来查询天气信息：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WeatherScreen(apiKey: 'YOUR_API_KEY_HERE'),  // 替换为你的OpenWeatherMap API密钥
    );
  }
}

class WeatherScreen extends StatefulWidget {
  final String apiKey;

  WeatherScreen({required this.apiKey});

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

class _WeatherScreenState extends State<WeatherScreen> {
  late final OpenWeatherClient client;
  String? weatherData;
  String? errorMessage;

  @override
  void initState() {
    super.initState();
    client = OpenWeatherClient(apiKey: widget.apiKey);
    fetchWeatherData('London');  // 你可以根据需要更改城市名
  }

  Future<void> fetchWeatherData(String city) async {
    try {
      final response = await client.getWeatherByCityName(city);
      setState(() {
        weatherData = 'Temperature: ${response.main.temp.toInt()}°C\n'
            'Weather: ${response.weather[0].description}\n'
            'Humidity: ${response.main.humidity}%';
        errorMessage = null;
      });
    } catch (e) {
      setState(() {
        errorMessage = 'Failed to fetch weather data: ${e.message}';
        weatherData = null;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Weather Information',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            if (errorMessage != null)
              Text(
                errorMessage!,
                style: TextStyle(color: Colors.red),
              )
            else if (weatherData != null)
              Text(
                weatherData!,
                style: TextStyle(fontSize: 18),
              )
            else
              CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. MyApp是应用的根widget，它包含了WeatherScreen。
  2. WeatherScreen是一个StatefulWidget，它初始化了OpenWeatherClient并在initState方法中调用fetchWeatherData函数来获取伦敦的天气数据。
  3. fetchWeatherData函数使用client.getWeatherByCityName方法获取指定城市的天气数据，并更新UI以显示天气信息或错误信息。
  4. UI包含一个Textwidget来显示天气信息，如果获取数据失败，则显示错误信息；如果数据正在加载，则显示一个CircularProgressIndicator。

请确保将'YOUR_API_KEY_HERE'替换为你从OpenWeatherMap获取的API密钥。

这个示例展示了如何使用open_weather_client插件的基本功能。你可以根据需要扩展这个示例，例如添加用户输入城市名的功能，或者显示更详细的天气信息。

回到顶部