Flutter 最美天气预报应用，自定义 View 动画和 Material Design 风格

2023-09-19 06:33:02

打造您自己的 Flutter 天气预报应用：一份循序渐进指南

对于狂热的开发者来说，Flutter 凭借其惊人的响应式 UI、快速的性能和丰富的生态系统，已成为构建跨平台移动应用的首选。如果您正在寻找一个将您的 Flutter 技能提升到一个新高度的项目，那么我们为您准备了一个激动人心的挑战：创建一个功能齐全的最美天气预报应用。

开始吧！

1. 创建项目和添加依赖项

首先，在终端中使用 Flutter CLI 创建一个新的项目，并将其命名为 "weather_app"。

flutter create weather_app

接下来，在 pubspec.yaml 文件中添加必要的依赖项，包括 http、json_annotation 和 weather 包。

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+2
  json_annotation: ^2.0.0
  weather: ^2.0.0

2. 创建模型类

为了存储天气数据，我们需要创建一个模型类，例如 Weather。这个类将包含城市名称、温度和天气状况。

class Weather {
  final String city;
  final double temperature;
  final String weatherCondition;

  Weather({this.city, this.temperature, this.weatherCondition});

  factory Weather.fromJson(Map<String, dynamic> json) {
    return Weather(
      city: json['city'],
      temperature: json['temperature'],
      weatherCondition: json['weatherCondition'],
    );
  }
}

3. 创建服务类

现在，我们需要创建一个服务类来从 OpenWeatherMap API 获取天气数据。

class WeatherService {
  Future<Weather> getWeather(String city) async {
    final response = await http.get('https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUR_API_KEY');

    if (response.statusCode == 200) {
      return Weather.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load weather data');
    }
  }
}

4. 创建 UI

现在，是时候创建我们的 UI 来显示天气数据了。我们将使用 Material Design 风格，以确保应用程序具有现代和一致的外观。

class WeatherApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weather App'),
        ),
        body: Center(
          child: FutureBuilder<Weather>(
            future: WeatherService().getWeather('London'),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return WeatherWidget(weather: snapshot.data);
              } else if (snapshot.hasError) {
                return Text('Failed to load weather data');
              }

              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

5. 创建自定义 View 动画

为了使我们的应用程序更具吸引力，让我们创建一些自定义 View 动画。这些动画将根据天气状况显示不同的效果，例如下雨或下雪。

class WeatherWidget extends StatelessWidget {
  final Weather weather;

  WeatherWidget({this.weather});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(weather.city),
        Text(weather.temperature.toString()),
        Text(weather.weatherCondition),
        AnimatedWeatherIcon(weatherCondition: weather.weatherCondition),
      ],
    );
  }
}