深入 Flutter 开发：构建一个带网络请求的天气应用（含完整代码）

标题：深入 Flutter 开发：构建一个带网络请求的天气应用（含完整代码）

引言

在移动开发领域，Flutter凭借其高性能、跨平台能力和出色的 UI 表现力，已成为 Google 主推的现代应用开发框架。它使用 Dart 语言，通过自绘引擎 Skia 实现原生级渲染，支持一套代码运行在 iOS、Android、Web 和桌面端。

本文将带你从零开始，使用 Flutter 构建一个真实的天气查询应用，涵盖 UI 布局、HTTP 请求、JSON 解析、状态管理与错误处理，并附有完整可运行代码。

一、环境准备

确保已安装：

• Flutter SDK（v3.19+）
• Dart
• 编辑器（推荐 VS Code 或 Android Studio）
• 模拟器或真机调试设备

创建项目：

flutter create flutter_weather_appcdflutter_weather_app

二、添加依赖

编辑pubspec.yaml文件，添加网络请求和图标支持：

dependencies:flutter:sdk:flutterhttp:^1.0.0# 用于发送 HTTP 请求intl:^0.19.0# 格式化日期等（可选）

保存后运行：

flutter pub get

三、获取免费天气 API

我们使用 OpenWeatherMap 的免费 API：

1. 注册账号并获取API Key
2. 使用如下接口：

   https://api.openweathermap.org/data/2.5/weather?q=城市名&appid=你的APIKey&units=metric&lang=zh_cn

示例响应（JSON）：

{"name":"Beijing","main":{"temp":22.5,"humidity":60},"weather":[{"description":"晴朗","icon":"01d"}]}

四、项目结构

lib/ ├── main.dart ├── models/ │ └── weather.dart ├── services/ │ └── weather_service.dart └── screens/ └── weather_screen.dart

五、完整代码实现

1. 模型类：models/weather.dart

// lib/models/weather.dartclassWeather{finalString cityName;finaldouble temperature;finalString description;finalString iconCode;Weather({requiredthis.cityName,requiredthis.temperature,requiredthis.description,requiredthis.iconCode,});// 工厂构造函数：从 JSON 创建对象factoryWeather.fromJson(Map<String,dynamic>json){returnWeather(cityName:json['name'],temperature:json['main']['temp'].toDouble(),description:json['weather'][0]['description'],iconCode:json['weather'][0]['icon'],);}}

2. 网络服务：services/weather_service.dart

// lib/services/weather_service.dartimport'dart:convert';import'package:http/http.dart'ashttp;import'../models/weather.dart';classWeatherService{finalString apiKey;WeatherService(this.apiKey);Future<Weather>fetchWeather(String city)async{finalurl=Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric&lang=zh_cn');finalresponse=awaithttp.get(url);if(response.statusCode==200){returnWeather.fromJson(json.decode(response.body));}else{throwException('Failed to load weather data');}}}

3. 主界面：screens/weather_screen.dart

// lib/screens/weather_screen.dartimport'package:flutter/material.dart';import'../models/weather.dart';import'../services/weather_service.dart';classWeatherScreenextendsStatefulWidget{constWeatherScreen({super.key});@overrideState<WeatherScreen>createState()=>_WeatherScreenState();}class_WeatherScreenStateextendsState<WeatherScreen>{finalTextEditingController _controller=TextEditingController();Weather?_weather;bool _loading=false;String?_error;// 替换为你的 OpenWeatherMap API KeyfinalWeatherService service=WeatherService("YOUR_API_KEY_HERE");void_searchWeather()async{finalcity=_controller.text.trim();if(city.isEmpty)return;setState((){_loading=true;_error=null;});try{finalweather=awaitservice.fetchWeather(city);setState((){_weather=weather;_loading=false;});}catch(e){setState((){_error=e.toString();_loading=false;});}}@overrideWidgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:constText("🌦️ 天气预报"),centerTitle:true,),body:Padding(padding:constEdgeInsets.all(16.0),child:Column(children:[// 输入框 + 搜索按钮Row(children:[Expanded(child:TextField(controller:_controller,decoration:constInputDecoration(labelText:'输入城市名称',border:OutlineInputBorder(),),onSubmitted:(_)=>_searchWeather(),),),constSizedBox(width:8),ElevatedButton(onPressed:_searchWeather,child:constIcon(Icons.search),),],),constSizedBox(height:20),// 加载状态if(_loading)constCircularProgressIndicator()elseif(_error!=null)Text('错误: $_error',style:TextStyle(color:Colors.red[700]),)elseif(_weather!=null)_buildWeatherCard(_weather!)elseconstText("请输入城市查询天气")],),),);}// 显示天气信息卡片Widget_buildWeatherCard(Weather weather){returnCard(elevation:4,child:Container(padding:constEdgeInsets.all(20),child:Column(crossAxisAlignment:CrossAxisAlignment.center,children:[Text(weather.cityName,style:constTextStyle(fontSize:28,fontWeight:FontWeight.bold),),constSizedBox(height:10),Image.network('https://openweathermap.org/img/wn/${weather.iconCode}@2x.png',width:100,height:100,),Text('${weather.temperature.toStringAsFixed(1)}°C',style:constTextStyle(fontSize:40,color:Colors.orange),),Text(weather.description,style:constTextStyle(fontSize:18,color:Colors.grey),),],),),);}@overridevoiddispose(){_controller.dispose();super.dispose();}}

4. 入口文件：main.dart

// lib/main.dartimport'package:flutter/material.dart';import'screens/weather_screen.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContext context){returnMaterialApp(title:'Flutter 天气应用',theme:ThemeData(primarySwatch:Colors.blue,useMaterial3:true,),home:constWeatherScreen(),debugShowCheckedModeBanner:false,);}}

六、运行应用

flutter run

在输入框中输入城市如 “Shanghai” 或 “纽约”，点击搜索，即可看到实时天气信息。

七、核心知识点总结

八、优化建议（进阶方向）

• ✅ 使用Provider/Riverpod进行全局状态管理
• ✅ 添加地理位置定位自动获取城市
• ✅ 支持天气图标本地缓存
• ✅ 增加未来几天预报（调用 5-day forecast API）
• ✅ 支持主题切换（深色/浅色模式）

九、结语

通过这个实战项目，你已经掌握了 Flutter 应用开发的核心流程：
UI 构建 → 网络请求 → 数据解析 → 状态更新 → 用户交互

Flutter 不仅让跨平台开发变得简单高效，更以接近原生的性能和丰富的组件生态，成为现代移动开发的理想选择。

🎯 下一步：将本项目部署到 Web 平台（flutter build web），让你的天气应用在浏览器中也能运行！

📌 提示：请将YOUR_API_KEY_HERE替换为你在 OpenWeatherMap 获取的真实密钥。

GitHub 示例地址（参考）：github.com/yourname/flutter-weather

本文代码已在 Flutter 3.22 上测试通过，支持 Android、iOS 与 Web 平台。