Flutter 集成三方库开发鸿蒙 6.0+（API 20+）跨端天气备忘录应用

欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net标题不含 “教程”必须包含flutter、三方库、鸿蒙基于鸿蒙 6.0 / API 20完整项目天气备忘录跨端可直接在鸿蒙运行你可以直接复制保存为.md使用。Flutter 集成三方库开发鸿蒙 6.0API 20跨端天气备忘录应用项目介绍本项目基于Flutter构建集成常用三方库完整适配鸿蒙 6.0API 20系统实现一款跨端天气备忘录。功能包含本地备忘录存储网络获取天气数据弹窗提示鸿蒙 6.0 真机 / 模拟器稳定运行API 20 最新规范适配使用三方库dio网络请求shared_preferences本地存储fluttertoast轻提示一、环境要求鸿蒙 6.0 / API 20Flutter 3.16开启 Flutter 鸿蒙支持DevEco Studio 最新版鸿蒙 SDK API 20 及以上鸿蒙 6.0 模拟器 / 真机开启鸿蒙支持命令bash运行flutter config --enable-harmony二、创建 Flutter 项目bash运行flutter create flutter_harmony_weather_note cd flutter_harmony_weather_note三、配置鸿蒙 API 20必须修改打开harmony/build-profile.json5确保版本如下json{ apiVersion: 20, compatibleSdkVersion: 20, targetSdkVersion: 20 }四、pubspec.yaml 引入三方库鸿蒙 6.0 兼容yamldependencies: flutter: sdk: flutter dio: ^5.8.01 # 网络请求三方库 shared_preferences: ^2.5.2 # 本地存储三方库 fluttertoast: ^8.2.12 # 提示三方库执行安装bash运行flutter pub get五、完整代码lib/main.dart可直接运行dartimport package:flutter/material.dart; import package:dio/dio.dart; import package:shared_preferences/shared_preferences.dart; import package:fluttertoast/fluttertoast.dart; // 程序入口 void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: Flutter 三方库 鸿蒙天气备忘录, theme: ThemeData(primarySwatch: Colors.blue), debugShowCheckedModeBanner: false, home: const WeatherNotePage(), ); } } // 主页面——天气备忘录 class WeatherNotePage extends StatefulWidget { const WeatherNotePage({super.key}); override StateWeatherNotePage createState() _WeatherNotePageState(); } class _WeatherNotePageState extends StateWeatherNotePage { // 输入框控制器 final TextEditingController _noteController TextEditingController(); // 备忘录列表 ListString _noteList []; // 天气数据 String _weatherInfo 加载中...; // 三方库Dio 实例 final Dio _dio Dio(); override void initState() { super.initState(); _loadNotes(); // 读取本地备忘录 _getWeather(); // 获取天气 } // // 三方库 shared_preferences 加载备忘录 // Futurevoid _loadNotes() async { final prefs await SharedPreferences.getInstance(); setState(() { _noteList prefs.getStringList(harmony_notes) ?? []; }); } // // 三方库 shared_preferences 保存备忘录 // Futurevoid _saveNotes() async { final prefs await SharedPreferences.getInstance(); prefs.setStringList(harmony_notes, _noteList); } // 添加备忘录 void _addNote() { String text _noteController.text.trim(); if (text.isEmpty) { Fluttertoast.showToast(msg: 请输入内容); return; } setState(() { _noteList.add(text); }); _saveNotes(); _noteController.clear(); Fluttertoast.showToast(msg: 保存成功鸿蒙 6.0 本地存储); } // 删除备忘录 void _deleteNote(int index) { setState(() { _noteList.removeAt(index); }); _saveNotes(); Fluttertoast.showToast(msg: 已删除); } // // 三方库 dio 网络请求天气 // Futurevoid _getWeather() async { try { final res await _dio.get( https://api.open-meteo.com/v1/forecast, queryParameters: { latitude: 39.9042, longitude: 116.4074, current_weather: true, }, ); setState(() { _weatherInfo 温度: ${res.data[current_weather][temperature]}°C; }); Fluttertoast.showToast(msg: 天气获取成功); } catch (e) { setState(() { _weatherInfo 获取失败; }); } } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(Flutter 三方库 鸿蒙 6.0 天气备忘录), ), body: SingleChildScrollView( padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 天气区域 const Text(当前天气API 20 网络, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(height: 8), Container( width: double.infinity, padding: const EdgeInsets.all(12), decoration: BoxDecoration(color: Colors.blue[50], borderRadius: BorderRadius.circular(8)), child: Text(_weatherInfo, style: const TextStyle(fontSize: 16)), ), const SizedBox(height: 20), // 备忘录输入 const Text(备忘录本地存储, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(height: 8), Row( children: [ Expanded( child: TextField( controller: _noteController, decoration: const InputDecoration( hintText: 输入备忘内容, border: OutlineInputBorder(), ), ), ), const SizedBox(width: 10), ElevatedButton(onPressed: _addNote, child: const Text(保存)), ], ), const SizedBox(height: 20), // 备忘录列表 const Text(我的备忘, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), const SizedBox(height: 8), ListView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), itemCount: _noteList.length, itemBuilder: (context, index) { return ListTile( title: Text(_noteList[index]), trailing: IconButton( icon: const Icon(Icons.delete, color: Colors.red), onPressed: () _deleteNote(index), ), ); }, ), ], ), ), ); } }六、运行到鸿蒙 6.0API 20确保设备已连接bash运行flutter devices运行bash运行flutter run -d harmony七、项目说明鸿蒙 6.0 / API 20本项目完全适配鸿蒙 6.0 及以上版本使用API 20编译配置三方库均已兼容鸿蒙最新系统网络、存储、UI 均稳定运行八、你需要的标题最终确定版Flutter 集成三方库开发鸿蒙 6.0API 20跨端天气备忘录应用