Flutter天气预报插件weather_pack的使用

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

Flutter天气预报插件weather_pack的使用

简介

weather_pack 是一个易于使用的Flutter插件,用于获取天气预报信息。它支持多种单位测量、内置地理编码等功能。

主要特性

  • 🚲 使用简单 - 只需要API密钥。
  • 🏝 内置地理编码 - 通过名称或坐标搜索位置。
  • 🩺 支持多种单位测量 - 速度、温度、气压和风向。
  • 🌤 提供原始天气图标。

安装

  1. pubspec.yaml 文件中添加依赖:

    dependencies:
      weather_pack: ^<latest_version>
    
  2. 运行命令:

    flutter pub get
    
  3. 在代码中导入:

    import 'package:weather_pack/weather_pack.dart';
    
  4. 如果需要查看示例代码,可以运行以下命令解包包并查看 example 文件夹:

    flutter pub unpack
    

    示例包括:

    • weather_in_console - Dart控制台应用程序
    • create_code_for_readme - 当前手册中的所有示例
    • example - 简单使用示例

快速入门

获取当前天气

Future<void> main() async {
  const api = 'YOUR_APIKEY'; // 替换为你的Openweathermap API密钥
  final wService = WeatherService(api);

  // 获取阿姆斯特丹的当前天气
  final WeatherCurrent currently = await wService.currentWeatherByLocation(
      latitude: 52.374, longitude: 4.88969);
  
  print(currently);
}

更改请求语言

final lang = WeatherLanguage.arabic;

final wService = WeatherService(api, language: lang);

支持的语言列表可以通过点击 Supported languages 查看。

使用天气服务

目前有两个天气模型:WeatherCurrentWeatherOneCall。其中 WeatherOneCall 包含以下内容:

  • WeatherCurrent
  • List<WeatherHourly>
  • List<WeatherMinutely>
  • List<WeatherDaily>
  • List<WeatherAlert>

获取OneCall天气

Future<void> getOnecallWeatherWays({String api = 'Your_APIkey'}) async {
  final wService2_5 = WeatherService(api, oneCallApi: OneCallApi.api_2_5);

  final WeatherOneCall onecall2_5 = await wService2_5.oneCallWeatherByLocation(
      latitude: 52.374, longitude: 4.88969);

  print(onecall2_5);

  // 如果你使用的是"One Call API 3.0"订阅...
  final wService3_0 = WeatherService(api, oneCallApi: OneCallApi.api_3_0);

  final WeatherOneCall onecall3_0 = await wService3_0.oneCallWeatherByLocation(
      latitude: 52.374, longitude: 4.88969);

  print(onecall3_0);
}

使用地理编码服务

GeocodingService 提供了方便的位置搜索功能,支持直接和反向地理编码。

直接地理编码

void main() async {
  const api = 'YOUR_APIKEY'; // 替换为你的Openweathermap API密钥
  final gService = GeocodingService(api);

  final List<PlaceGeocode> places = await gService.getLocationByCoordinates(
      latitude: 52.374, longitude: 4.88969);

  print(places);
}

反向地理编码

final String cityName = 'suggested location name';

final List<PlaceGeocode> places = await gService.getLocationByCityName(cityName);

使用单位测量

默认情况下,所有天气模型(如 WeatherCurrent)都有可测量值类型为 double。为了正确显示数据,可以使用转换方法 valuevalueToString

void worksTempUnits({
  double temp = 270.78, // 假设从 [WeatherCurrent.temp] 获取
  int precision = 3,
  Temp unitsMeasure = Temp.celsius,
}) {
  print(unitsMeasure.value(temp, precision)); // `-2.37` 类型 `double`
  print(unitsMeasure.valueToString(temp, precision)); // `-2.370` 类型 `String`
}

支持的单位包括:

  • 温度:Kelvin, Celsius, Fahrenheit
  • 速度:m/s, mph, kph
  • 气压:hectoPa, mbar, mmHg, kPa, atm, inHg
  • 风向:N, NE, E, SE, S, SW, W, NW

异常处理

每个 WeatherServiceGeocodingService 方法都可以抛出 OwmApiException 异常,你可以如下处理:

void exceptionHandling() async {
  final wService = WeatherService('bRoKen_aPi');

  WeatherCurrent? current;
  try {
    current =
        await wService.currentWeatherByLocation(latitude: 1, longitude: 1);
  } on OwmApiException catch (e, s) {
    print(e.code);
    print(e.message);
    print(s);
  }
}

自定义客户端

对于 GeocodingServiceWeatherService,你可以创建自定义 OWMBuilder 用于调试和日志记录:

class OWMBuilderCustom extends OWMBuilder {
  @override
  Future<T> getData<T>({required Uri uri, required T Function(dynamic data) builder}) {
    print(uri);
    return super.getData(uri: uri, builder: builder);
  }
}

void workOwmBuilder({
  String api = 'your_apikey',
}) async {
  final customOWMBuilder = OWMBuilderCustom();
  final gService = GeocodingService(api, owmBuilder: customOWMBuilder);

  final List<PlaceGeocode> places = await gService.getLocationByCoordinates(
      latitude: 52.374, longitude: 4.88969);

  print(places);
}

使用天气图标

可以从本地包路径 assets/weather_icons/ 获取天气图标:

Image getWeatherIcon(String weatherIcon) {
  return Image.asset(
    ImagePathWeather.getPathWeatherIcon(weatherIcon),
    filterQuality: FilterQuality.high, // 可选
    package: ImagePathWeather.packageName,
  );
}

或者手动处理:

Widget getWeatherIcon(WeatherCurrent weather) {
  return Image.asset(
    'assets/weather_icons/${weather.weatherIcon}.png', // 图标路径
    package: 'weather_pack', // 包名
    filterQuality: FilterQuality.high, // 可选
    errorBuilder: (c, e, s) => Text(e), // 错误时返回的部件
  );
}

API密钥测试

可以使用 OWMTestService 测试API密钥是否有效:

Future<void> testAPIkey({
  String testedAPIkey = 'your_apikey',
}) async {
  final bool isValid = await OWMTestService(testedAPIkey).isValidApikey();

  final bool isValidOneCall2 = await OWMTestService(testedAPIkey)
      .isValidApikeyForOneCall(OneCallApi.api_2_5);

  final bool isValidOneCall3 = await OWMTestService(testedAPIkey)
      .isValidApikeyForOneCall(OneCallApi.api_3_0);
}

以上是关于 weather_pack 插件的基本使用介绍。如果你有更多问题或建议,请参考官方文档或联系作者。


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

1 回复

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


当然,下面是一个关于如何使用Flutter中的weather_pack插件来创建天气预报应用的示例代码。这个示例将展示如何获取当前天气数据并显示在界面上。

首先,确保你的Flutter项目已经设置好,并且在pubspec.yaml文件中添加了weather_pack依赖:

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

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

接下来,我们将创建一个简单的Flutter应用来展示天气预报。以下是main.dart文件的代码示例:

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

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

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

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  late WeatherModel weatherData;
  late WeatherPackController weatherController;

  @override
  void initState() {
    super.initState();
    weatherController = WeatherPackController(
      apiKey: '你的API_KEY', // 替换为你的天气API密钥
    );

    // 获取当前天气数据
    weatherController.getCurrentWeatherByLocation('北京').then((value) {
      setState(() {
        weatherData = value;
      });
    }).catchError((error) {
      print('Error fetching weather data: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather Forecast'),
      ),
      body: Center(
        child: weatherData.location != null
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Location: ${weatherData.location!.name}',
                    style: TextStyle(fontSize: 24),
                  ),
                  SizedBox(height: 16),
                  Text(
                    'Temperature: ${weatherData.current!.temperature}°C',
                    style: TextStyle(fontSize: 24, color: Colors.blue),
                  ),
                  SizedBox(height: 16),
                  Text(
                    'Weather: ${weatherData.current!.weather![0].description}',
                    style: TextStyle(fontSize: 20),
                  ),
                ],
              )
            : CircularProgressIndicator(),
      ),
    );
  }

  @override
  void dispose() {
    weatherController.dispose();
    super.dispose();
  }
}

在这个示例中,我们做了以下几件事:

  1. 设置依赖:在pubspec.yaml文件中添加了weather_pack依赖。
  2. 创建应用结构:使用MaterialAppScaffold创建了一个简单的Flutter应用结构。
  3. 初始化WeatherPackController:在initState方法中初始化了WeatherPackController,并传入你的天气API密钥。
  4. 获取天气数据:使用getCurrentWeatherByLocation方法获取指定位置的当前天气数据,并在获取成功后更新状态。
  5. 显示天气数据:在UI中显示位置、温度和天气描述。

请注意,你需要替换'你的API_KEY'为你的实际天气API密钥。另外,这个示例假设weather_pack插件的API和模型结构与你使用的版本相匹配。如果API有变动,请查阅最新的weather_pack文档进行调整。

回到顶部