Flutter天气信息获取插件weather_kit的使用

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

Flutter天气信息获取插件 weather_kit 的使用

前提条件

Apple Developer Program

您必须是Apple Developer Program的成员才能使用这个包。

Bundle ID

您可以在Xcode或Certificates, Identifiers & Profiles中注册并检查Bundle ID。

Team ID

您可以在Membership页面查看Team ID。

Weather Kit的keyID和p8证书

为了使用Weather Kit,请按照以下步骤操作:

  1. 访问 Certificates, Identifiers & Profiles / Keys
  2. 在表单中输入任何Key Name,并选中Weather Kit复选框。
  3. 点击"register",您可以查看Key ID。
  4. 点击"Download"下载p8证书。

获取KeyID和p8证书

示例代码

生成JWT

final weatherKit = WeatherKit();
final token = weatherKit.generateJWT(
  bundleId: 'com.example',
  teamId: 'team id',
  keyId: 'key id',
  pem: 'example.p8', // 替换为您的p8文件内容
  expiresIn: const Duration(hours: 1),
);

获取当前天气数据

final result = await weatherKit.obtainWeatherData(
  jwt: token,
  language: 'ja',
  latitude: '35.71',
  longitude: '139.811',
  dataSets: 'currentWeather',
);

完整示例Demo

以下是完整的Flutter应用示例,演示如何使用weather_kit插件来获取天气信息:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather Kit DEMO',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? weatherInfo;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Weather Kit Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                const pem = """-----BEGIN PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQEFAASCAmMwggJfAgEAAoGBAL...
-----END PRIVATE KEY-----"""; // 替换为您的p8文件内容
                final weatherKit = WeatherKit();
                final jwt = weatherKit.generateJWT(
                  bundleId: 'com.example.weatherapp', // 替换为您的Bundle ID
                  teamId: 'YOUR_TEAM_ID', // 替换为您的Team ID
                  keyId: 'YOUR_KEY_ID', // 替换为您的Key ID
                  pem: pem,
                  expiresIn: const Duration(hours: 1),
                );

                try {
                  final currentWeather = await weatherKit.obtainWeatherData(
                    jwt: jwt,
                    language: 'en',
                    latitude: '35.71',
                    longitude: '139.811',
                    dataSets: 'currentWeather',
                  );

                  setState(() {
                    weatherInfo = currentWeather.toString();
                  });
                } catch (e) {
                  setState(() {
                    weatherInfo = 'Error fetching weather data: $e';
                  });
                }
              },
              child: const Text('Fetch Current Weather'),
            ),
            if (weatherInfo != null) ...[
              const SizedBox(height: 20),
              Text(
                weatherInfo!,
                style: const TextStyle(fontSize: 16),
                textAlign: TextAlign.center,
              ),
            ],
          ],
        ),
      ),
    );
  }
}

定价

前500,000次调用是免费的。更多详情请参阅这里

参考资料


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

1 回复

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


当然,以下是一个关于如何使用 weather_kit 插件来获取天气信息的 Flutter 代码示例。这个示例将展示如何初始化插件、获取当前位置的天气数据以及展示这些数据。

首先,确保你已经在 pubspec.yaml 文件中添加了 weather_kit 依赖:

dependencies:
  flutter:
    sdk: flutter
  weather_kit: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是代码示例:

import 'package:flutter/material.dart';
import 'package:weather_kit/weather_kit.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geolocator_platform_interface/geolocator_platform_interface.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(),
    );
  }
}

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

class _WeatherScreenState extends State<WeatherScreen> {
  late WeatherKitClient _weatherKitClient;
  late Position? _currentPosition;
  late WeatherResponse? _weatherResponse;

  @override
  void initState() {
    super.initState();
    _weatherKitClient = WeatherKitClient(apiKey: 'YOUR_API_KEY');  // 替换为你的WeatherKit API Key
    _getCurrentLocation();
  }

  Future<void> _getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    // 检查位置服务是否启用
    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return Future.error('Location services are disabled.');
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return Future.error('Location permissions are denied');
      }
    }

    if (permission == LocationPermission.deniedForever) {
      return Future.error(
          'Location permissions are permanently denied, we cannot request permissions.');
    }

    _currentPosition = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

    if (_currentPosition != null) {
      _getWeatherData(_currentPosition!.latitude, _currentPosition!.longitude);
    }
  }

  Future<void> _getWeatherData(double latitude, double longitude) async {
    try {
      _weatherResponse = await _weatherKitClient.getCurrentWeather(
          latitude: latitude,
          longitude: longitude
      );
      setState(() {});
    } catch (e) {
      print('Error fetching weather data: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Center(
        child: _weatherResponse == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Current Weather in ${_weatherResponse!.location!.name}',
                    style: TextStyle(fontSize: 24),
                  ),
                  Text(
                    'Temperature: ${_weatherResponse!.current!.temperature}°',
                    style: TextStyle(fontSize: 20),
                  ),
                  Text(
                    'Description: ${_weatherResponse!.current!.description}',
                    style: TextStyle(fontSize: 18),
                  ),
                ],
              ),
      ),
    );
  }
}

注意事项:

  1. API Key:你需要从 WeatherKit 获取一个 API Key,并在代码中替换 'YOUR_API_KEY'
  2. 权限:确保你的应用有获取位置信息的权限。这个示例中使用了 geolocator 插件来处理位置权限和获取位置信息。
  3. 错误处理:在生产环境中,你应该添加更多的错误处理逻辑,以处理各种可能的异常情况,如网络错误、API 错误等。

希望这个示例能帮助你理解如何使用 weather_kit 插件来获取和展示天气信息。

回到顶部