标题：深入 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：
- 注册账号并获取API Key
- 使用如下接口：
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” 或 “纽约”，点击搜索，即可看到实时天气信息。
七、核心知识点总结
| 技术点 | 说明 |
|---|---|
StatefulWidget | 用于需要动态更新的界面（如加载、数据变化） |
http.get() | 发送网络请求获取天气数据 |
Future与async/await | 异步处理网络调用 |
setState() | 触发 UI 重绘 |
TextFormField | 用户输入处理 |
JSON 解析 | 使用factory构造函数映射 API 响应 |
| 错误处理 | try-catch 捕获异常并友好提示 |
八、优化建议（进阶方向）
- ✅ 使用
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 平台。
