# flutterDemo **Repository Path**: nacker/flutter-demo ## Basic Information - **Project Name**: flutterDemo - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-11-10 - **Last Updated**: 2024-11-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # flutterdemo ``` # 获取安卓设备id android_id: ^0.4.0 # 自动调整设备方向的插件 auto_orientation: ^2.3.1 # 用于创建头像堆叠效果的库 avatar_stack: ^1.2.0 # 提供在应用图标上显示徽章的功能 badges: ^3.1.2 # 用于控制设备亮度和音量的插件 brightness_volume: ^1.0.3 # 缓存网络上的图像以提高性能 cached_network_image: ^3.3.1 # 提供卡片式轮播功能 card_swiper: ^3.0.1 # 用于在 Flutter 应用中实现旋转木马式滑块效果 carousel_slider: ^4.2.1 # 一个简单易用的视频播放器 chewie: ^1.8.1 # 用于加密的库 crypto: ^3.0.3 # 用于格式化日期的库 date_format: ^2.0.7 # 用于获取设备信息的增强版，提供更多的设备信息 device_info_plus: ^10.1.0 # 在 Flutter 中实现下拉搜索框的插件 dropdown_search: ^5.0.3 # 用于在边框上创建虚线效果的库 dotted_border: ^2.0.0+3 # 用于数据加密的库 encrypt: ^5.0.3 # 用于在 Flutter 中处理 Excel 文件的库 excel: ^4.0.3 # 扩展 Text 小部件以支持更多功能 extended_text: ^13.0.2 # 在 Dart 空安全环境下的悬浮按钮库 ffloat_nullsafety: ^3.3.1 # Firebase 核心库，【若要升级需修改最低支持iOS版本，目前为12.0】 firebase_core: ^2.32.0 # 用于处理 Firebase 推送通知，【若要升级需修改最低支持iOS版本，目前为12.0】 firebase_messaging: ^14.9.4 # 用于在 Flutter 中选择日期和时间的插件 flutter_datetime_picker_plus: ^2.2.0 # 用于在 Flutter 应用中加载环境变量的库 flutter_dotenv: ^5.0.2 # 用于在 Flutter 中解析 HTML 的插件 flutter_html: ^3.0.0-alpha.5 # 用于在 Flutter 应用中嵌入 WebView flutter_inappwebview: ^5.8.0 # 提供在 Flutter 应用中显示本地通知的功能 flutter_local_notifications: ^17.1.2 # Flutter 应用状态管理库，使用 Riverpod 方式 flutter_riverpod: ^2.5.1 # 在 Flutter 应用中显示 SVG 图像的功能 flutter_svg: ^2.0.10+1 # 用于在 Flutter 应用中实现开关组件的库 flutter_switch: ^0.3.2 # 用于获取和设置用户代理信息的插件 fk_user_agent: ^2.1.0 # HTML 解析库 html: ^0.15.4 # 提供无限滚动列表视图的插件 infinite_listview: ^1.1.0 # 用于国际化和本地化的 Dart 库 intl: ^0.19.0 # 用于安全地处理 JSON 数据的库 json2dart_safe: ^1.5.6 # 用于在应用商店中启动应用评论的库 launch_review: ^3.0.1 # 用于实现点赞按钮的库 like_button: ^2.0.4 # 用于获取设备位置信息的插件 location: ^6.0.2 # 用于启动地图应用程序的库 map_launcher: ^3.3.0 # 用于获取应用程序信息的插件 package_info_plus: ^8.0.0 # 用于访问设备文件路径的插件 path_provider: ^2.1.3 # 用于创建 PIN 码输入字段的库 pin_code_fields: ^8.0.1 # Flutter 的状态管理库，提供 Provider 和 Consumer 等 provider: ^6.0.3 # 用于在 Flutter 应用中扫描 QR 码的插件 qr_code_scanner: ^1.0.1 # 用于在 Flutter 中渲染 QR 码的插件 qr_flutter: ^4.0.0 # 用于实现可拖动和重新排序的列表 reorderables: ^0.6.0 # 用于在 Flutter 中实现滚动到指定索引的功能 scroll_to_index: ^3.0.1 # 用于实现 Apple 登录的插件 sign_in_with_apple: ^6.1.0 # 安全的密码学库 sm_crypto: ^1.0.3 # 用于在 Flutter 中创建时间轴的库 timelines: ^0.1.0 # 用于创建二元组的 Dart 库 tuple: ^2.0.0 # 用于在 Flutter 中启动 URL 的功能 uni_links: ^0.5.1 # 用于在 Flutter 中启动 URL 的功能 url_launcher: ^6.3.0 # 用于在 Flutter 中播放视频的功能 video_player: ^2.8.6 # 检测小部件可见性的插件 visibility_detector: ^0.4.0+2 ``` ## Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is your first Flutter project: - [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) - [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) For help getting started with Flutter development, view the [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference. ## 一、 项目框架 3.1、初始化项目 3.2、编写一个简单页面-准备 3.3、编写一个简单页面-实现 3.4、安装fluro并添加登录页面 3.5、如何配置fluro 3.6、配置fluro 3.7、优化路由配置 ## 二、 静态页面 4.1、登录页面-页面分析 4.2、登录页-主体结构 4.3、登录页-密码显示隐藏 4.4、登录页-细节优化 4.5、注册页-添加 4.6、注册页-完善 4.7、首页-tab-分析 4.8、首页-tab-编码 4.9、首页-tabIndex-分析 4.10、首页-tabIndex-轮播图 4.11、封装CommonImage ### 3.1、 初始化项目 【操作步骤】 1. 打开vscode 2. 初始化项目【菜单】——【查看】——【命令面板】——【Flutter：New Project】 3. demo文件夹分析 4. 打开模拟器【菜单】——【查看】——【命令面板】——【Flutter： Launch Emulator】 5. 在ios模拟器上运行demo【菜单】——【运行】——【启动调试】 6. 在Android模拟器上运行demo 7. demo代码分析 1. 引入flutter依赖 2. 程序入口 3. 无状态组件 4. 有状态组件 注意: 1. 如果没有命令Flutter： New Project，则说明fluter安装有问题 ### 3.3、 编写一个简单页面-实现 【操作步骤】 1. 添加PageContent组件 1. 新建文件/widgets/page_content.dart 2. 添加material依赖 3. 编写无状态组件 4. 添加name参数 5. 使用Scaffold 2. 添加home页面 1. 新建文件/pages/home/index.dart 2. 添加material, page_content依赖 3. 编写无状态组件 4. 使用PageContent 3. 添加Application应用根组件 1. 新建文件/application.dart 2. 添加依赖 3. 使用MaterialApp 4. 测试 ### 3.4、 安装fluro并添加登录页面 1. 了解fluro 1. 简单 2. 支持参数通配符/room/:id 3. 简化自定义动画 2. 添加依赖 dependencies: fluro: "^1.5.1" 3. 添加/pages/login.dart 4. 参考/pages/home/index.dart完善登录页 ### 3.6、 配置fluro 【操作步骤】 1. 编写路由配置文件 1. 创建routes.dart文件并编写Routes类的基本结构 2. 定义路由名称 3. 定义路由处理函数 4. 编写函数configureRoutes关联路由名称和处理函数 2. 在Application中配置路由 1. 定义router 2. 通过调用configureRoutes配置router 3. 在MaterialApp中使用router 3. 测试路由 1. 在PageContent中添加跳转按钮 ### 3.7、 优化路由配置 【操作步骤】 1. 错误页面处理 1. 在/pages目录添加not_found.dart文件 2. 实现NotFoundPage 3. 在/routes.dart添加_notFoundHandler 4. 在/routes.dart的configureRoutes中添加router.notFoundHandler=_notFoundHandler; 5. 修改pageContent测试 2. 带参数页面处理 1. 在/pages目录添加room_detail/index.dart文件 2. 实现RoomDetailPage 3. 在/Routes.dart添加_roomDetailHandler 4. 在/routes.dart的configureRoutes中添加router.roomDetailHandler=_roomDetailHandler; 5. 修改PageContent测试 ### 4.2、 登录页-主体结构 【操作步骤】 1. 添加Scaffold 2. 完成appBar部分 3. 完成body部分 1. 用户名 2. 密码 3. 登录按钮 4. 注册链接 4. 主题颜色——theme 5. 测试 ### 4.3、 登录页-密码显示隐藏 【操作步骤】 1. 将无状态组件改成有状态组件——右键 重构 2. 添加可点击的图标——iconButton 3. 添加状态——showPassword 4. 根据状态展示不同内容 5. 给图标添加点击事件 6. 测试 ### 4.4、 登录页-细节优化 【问题及解决方案】 1. 【去注册】颜色问题 ——> 添加style 2. 上下间距问题？ ——> 添加Padding 3. 边距/异形屏幕问题？ ——> 使用SafeArea 4. 垂直高度不足问题？ ——> 使用ListView替代Column 5. 登录按钮宽度和颜色问题？ ——> 宽度：SizeBox或者父级固定宽度，颜色：手动设置 ### 4.5、 注册页-添加 【操作步骤】 1. 添加文件/pages/register.dart 2. 将login.dart文件拷贝到register.dart 3. 修改类名称 4. 修改title 5. 在路由中添加register 1. 添加route name 2. 添加route handle 3. 在configureRoutes中关联name和router 6. 修改类组件类型，需要重启app后测试 ### 4.6、 注册页-完善 【操作步骤】 1. 删除密码显示逻辑 2. 添加确认密码 3. 修改按钮及下方链接的文案 4. 优化登录注册跳转，使用Navigator.pushReplacementNamed ### 4.7、 首页-tab-分析 【结论】 1. 首页共用tab按钮区域 2. tab内容区的appBar不一样 3. 4个tab内容区不一样 4. 可以使用flutter自带组件BottomNavigationBar实现 1. 需要准备4个tab内容区(tabView) 2. 需要准备4个BottomNavigationBarItem ### 4.8、 首页-tab-编码 【操作步骤】 1. 将HomePage改成有状态组件 2. 使用准备好的数据 3. 使用官网demo代码 4. 删除appBar 5. 修改Scaffold.body 6. 修改Scaffold.bottomNavigationBar ### 4.9、 首页-tabIndex-分析 【结论】 首页第一个tab（tabIndex）共5个区域, 对应5个不用的模块。 1. 顶部区域--searchBar 2. 轮播图区域--IndexSwipper 3. 导航区域--IndexNavigator 4. 房屋推荐区域--IndexRecommend 5. 资讯区域--Info ### 4.10、 首页-tabIndex-页面结构 【操作步骤】 1. 新建文件pages/home/tab_index/index.dart 2. 添加依赖，编写无状态组件 3. 简化实现顶部区域--appBar 4. body部分包含多个组件且可以滚动——使用ListView 5. 在HomePage中使用TabIndex ### 4.11、 首页-tabIndex-轮播图-准备 【结论】 使用flutter_swiper第三方组件实现轮播图功能 ### 4.12、 首页-tabIndex-轮播图-实现 【操作步骤】 1. 准备组件框架代码 1. 新建文件widgets/common_swiper.dart 2. 添加依赖material和flutter_swiper 3. 准备图片数据 4. 编写无状态组件 5. 添加images参数并在构造函数中赋值 2. 编写swiper核心代码 1. 参照官网使用swiper 2. 修改itemBuilder和itemCount 3. Swiper父组件指定高度 4. 删除Swiper.control 3. 测试 1. 在tabIndex中使用CommonSwiper ### 4.13、 首页-tabIndex-导航-准备 【资源准备】 1. 本地图片准备 1. 将图片拷贝到static/images/目录 2. 在pubspec.yaml中引入图片 2. 数据准备 ### 4.14、 首页-tabIndex-导航-实现 【操作步骤】 1. 添加文件pages/home/tab_index/index_navigator.dart 2. 添加依赖material和index_navigator_item 3. 编写无状态组件 4. 完成页面结构 5. 测试 6. 调整细节 ### 4.15、 组件CommonImage封装-分析 【结论】 使用flutter_advanced_networkimage_2 版本^2.0.1, 自己封装一个图片组件！ ### 4.16、 组件CommonImage封装-实现 【操作步骤】 1. 准备 1. 安装flutter_advanced_networkimage_2:^2.0.1依赖 2. 添加文件/widgets/common_image.dart 3. 引入依赖 4. 编写正则根据图片地址判断是网络图片还是本地图片 2. 编写框架代码 1. 编写无状态组件 2. 完善组件参数src with height fit 3. 完成核心逻辑 1. 如果是网络图片，使用flutter_advanced_networkimage_2 2. 如果是本地图片，使用Image.asset 3. 返回Container 4. 使用CommonImage ### 4.17、 首页-tabIndex-推荐-准备 【数据准备】 1. 准备静态图片 2. 准备数据代码 ### 4.18、 首页-tabIndex-推荐-编码-主体结构部分 【操作步骤】 1. 准备 1. 新建文件pages/home/tab_index/index_recommend_data.dart 2. 使用上一节准备好的数据 3. 新建文件pages/home/tab_index/index_recommend.dart 2. 编写核心代码 1. 添加依赖，dataList参数，无状态组件，indexRecommendData改成常量 2. 添加背景色及边距 3. 完善header部分 4. 添加wrap 3. 测试 ### 4.19、 首页-tabIndex-推荐-编码-item部分 【操作步骤】 1. 新建文件pages/home/tab_index/index_recommend_item_widget.dart 2. 添加依赖，无状态组件，data参数 3. 编写主体结构 4. 使用并测试 5. 完善细节 ### 4.20、 首页-tabIndex-资讯-准备 【数据准备】 1. 准备数据代码 注意： 1. 文字区域可能随屏幕宽度而改变 2. title自动换行问题 ### 4.21、 首页-tabIndex-资讯-编码-主体结构 【操作步骤】 1. 准备 1. 添加文件pages/home/info/data.dart 2. 添加上一节数据到data.dart 3. 添加文件pages/home/info/index.dart 4. 在index.dart添加material依赖 2. 编写核心代码 1. 完善title部分——注意title部分根据参数显示或隐藏 2. 完善body部分 3. 测试 注意： 1. Container alignment的使用 2. 可以通过以下方式修改dart版本 ### 4.22、 首页-tabIndex-资讯-编码-item部分 【操作步骤】 1. 创建文件pages/home/info/item_widget.dart 2. 引入依赖，编写无状态组件，添加data参数 3. 完成主体结构 4. 测试代码 5. 完善细节 ### 4.23、 首页-tabInfo 【操作步骤】 1. 新建文件pages/home/tab_info/index.dart 2. 添加material依赖，编写有状态组件 3. 完善header部分 4. 完善body部分 5. 测试 ### 4.24、 首页-tabSearch-分析 【数据准备】 1. 数据文件pages/home/tab_search/data_list.dart ### 4.25、 首页-tabSearch-主体结构 【操作步骤】 1. 创建文件pages/home/tab_search/data_list.dart使用上一节准备的数据 2. 创建文件pages/home/tab_search/index.dart 3. 引入依赖，创建有状态组件 4. 编写主体结构 5. 测试 ### 4.26、 首页-tabSearch-item部分 【操作步骤】 1. 创建文件widgets/room_list_item_widget.dart 2. 引入依赖，创建无状态组件，添加参数data 3. 完成主体结构 4. 添加测试 5. 完善细节 要点： 文本...的问题 ### 4.27、 首页-tabSearch-tag部分 【操作步骤】 1. 新建文件widgets/common_tag.dart 2. 引入material依赖，添加无状态组件，添加参数title,color,backgroundColor 3. 完成展示效果 4. 测试 5. 优化参数 使用factory工厂构造函数 要点： 圆角设置，factory使用 ### 4.28、 组件-SearchBar-封装-分析 【结论】 1. 结构 2. 参数 3. 静态资源 1. 资源地址static/icons/widget_search_bar_map.png 2. 拷贝目标地址 3. 在项目配置文件pubspec.yaml添加 1. -static/icons/widget_search_bar_map.png ### 4.29、 组件SearchBar封装-主体结构开发 【操作步骤】 1. 创建文件widgets/search_bar/index.dart 2. 引入material依赖，创建有状态组件，添加参数 3. 编写界面代码 4. 测试 5. 完善代码 要点： 在有状态组件中使用参数(title)方式widget.title ### 4.30、 组件SearchBar封装-完善搜索框 【操作步骤】 1. 解决背景色，圆角——Container,TextField.InputDecoration.border=InputBorder.none 2. 前置图标InputDecoration.prefixIcon 3. 后置图标InputDecoration.suffixIcon 4. 搜索提示样式InputDecoration.hintStyle 5. 居中InputDecoration.contentPadding 6. 间距问题 使用InputDecoration.Icon替代InputDecoration.prefixIcon ### 4.31、 组件SearchBar封装-细节完善 【操作步骤】 1. 使用参数defaultInputValue 2. 使用参数inputValue 3. 清除按钮逻辑实现 1. 新增状态_searchWord 2. 添加处理函数_onClean 3. 添加并实例化_controller 4. 根据_searchWord隐藏清除按钮 4. 添加TextField.onTap 5. 添加TextField.onSearchSubmit 6. 添加TextField.textInputAction:TextInputAction.search 7. 删除`||true` ### 4.32、 组件SearchBar封装-使用及优化 【操作步骤】 1. 在tabIndex使用 2. 在tabSearch使用 3. 在tabInfo使用 4. 优化焦点问题 1. 创建焦点对象FocusNode_focus,并实例化 2. 在TextField使用焦点对象 3. 在TextField onTap回调函数中通过_focus.unfocus()方法去焦点。 ### 4.33、 首页-tabProfile-分析 【数据准备】 1. 网络图片 1. 未登录图片"https://tva1.sinaimg.cn/large/006y8mN6ly1g6tbgbqv2nj30i20i2wen.jpg" 2. 已登录占位图片"https://tva1.sinaimg.cn/large/006y8mN6ly1g6tbnovh8jj30hr0hrq3l.jpg" 2. 静态资源 1. 资源地址static/images/home_profile_xxx.png 3. 配置文件 4. 列表数据 ### 4.34、 首页-tabProfile-主体结构 【操作步骤】 1. 准备 1. 添加文件pages/home/tab_profile/index.dart 2. 添加material依赖，添加无状态组件 2. 主体结构 1. 使用Scaffold搭建主体结构 2. 测试效果 3. 完善 1. 完善appBar部分 2. 完善body部分 ### 4.35、 首页-tabProfile-登录注册-未登录试图 【操作步骤】 1. 准备 1. 添加文件pages/home/tab_profile/header.dart 2. 添加material依赖，添加无状态组件 2. 核心编码 1. 添加背景色和高度 2. 添加图片"https://tva1.sinaimg.cn/large/006y8mN6ly1g6tbgbqv2nj30i20i2wen.jpg" 3. 添加右侧文字 3. 测试和完善 1. 测试效果 2. 完善细节 ### 4.36、 首页-tabProfile-登录注册-已登录试图 【操作步骤】 1. 把内容显示部分抽提成函数 2. 根据登录状态使用函数 3. 修改已登录状态函数"https://tva1.sinaimg.cn/large/006y8mN6ly1g6tbnovh8jj30hr0hrq3l.jpg" 4. 测试 ### 4.37、 首页-tabProfile-功能按钮-主体结构 【操作步骤】 1. 准备 1. 准备静态图片 2. 准备数据文件pages/home/tab_profile/function_button_data.dart 2. 核心编码 1. 新建pages/home/tab_profile/function_button.dart 2. 使用Wraper完成主体结构部分 3. 使用Container替代item 3. 测试 ### 4.38、 首页-tabProfile-功能按钮-item 【操作步骤】 1. 新建文件pages/home/tab_profile/function_button_widget.dart 2. 引入依赖，添加无状态组件，添加data参数 3. 完成Item主体结构 4. 测试 5. 完善细节 ### 4.39、 首页-tabProfile-广告及资讯 【操作步骤】 1. 创建文件pages/home/tab_profile/advertisement.dart 2. 引入material依赖，添加无状态组件 3. 完善主体结构'https://tva1.sinaimg.cn/large/006y8mN6ly1g6te62n8f4j30j603vgou.jpg' 4. 测试 5. 完善细节 ### 4.40、 设置页 【操作步骤】 1. 准备 1. 安装依赖fluttertoast:^3.1.3 2. utils/common_toast.dart新建文件,封装CommonToast 3. 新建文件pages/setting.dart,引入依赖，添加无状态组件 2. 核心编码 1. 完成页面主体结构 2. 在路由系统注册当前页面 3. 添加退出登录按钮 4. 实现退出登录逻辑 3. 测试 ### 4.41、 房屋管理页-主体结构 【操作步骤】 1. 准备 1. 添加文件pages/room_manage/index.dart 2. 添加material依赖，创建无状态组件 2. 核心编码 1. 使用Scaffold添加页面主体结构 2. 在路由系统注册当前页面 3. 添加tab AppBar.bottom:TabBar() 4. 添加body:TabBarView() 5. 在Scaffold通过DefaultTabController关联Tabbar和TabBarView 3. 测试 ### 4.42、 发布房源页-发布按钮 【操作步骤】 1. 添加floatingActionButton属性 2. 完善发布按钮主体结构GestureDetector>Container>Center>Text 3. 修改floatingActionButtonLocation 4. 完善细节 5. 封装组件 ### 4.43、 发布房源页-分析 【结论】 1. CommonTitle 2. CommonFormItem 3. CommonRadioFormItem 4. CommonSelectFormItem 5. CommonPicker 6. CommonImagePicker 7. CommonCheckButton 8. RoomAppliance ### 4.44、 发布房源页-主体结构 【操作步骤】 1. 创建文件pages/room_add/index.dart 2. 添加material依赖，添加有状态组件 3. 使用Scaffold完成页面主体结构 4. 添加提交按钮 5. 在路由中注册该页面 ### 4.45、 发布房源页-CommonTitle 【操作步骤】 1. 创建文件widgets/common_title.dart 2. 添加material依赖，添加无状态组件，添加title参数 3. 完成组件主体内容 4. 使用组件 5. 完善组件 ### 4.47、 发布房源页-CommonFormItem-实现 【操作步骤】 1. 准备 1. 创建文件widgets/common_form_item.dart 2. 添加依赖，编写无状态组件，添加并初始化参数 3. 使用组件 2. 核心代码 1. 主体结构 实现 2. 底线 实现 3. label 实现 4. 文本框 实现 5. 尾缀 实现 3. 测试 ### 4.48、 发布房源页-CommonFormItem-实现小区选择 【操作步骤】 1. 添加CommonFormItem 2. 完善contentBuilder 3. 完善点击事件处理 4. 测试 5. 优化CommonFormItem，调整Expanded位置 ### 4.49、 发布房源页-CommonRadioFormItem 【操作步骤】 1. 准备 1. 新建文件widgets/common_radio_form_item.dart 2. 添加material依赖，添加无状态组件，添加并初始化参数 2. 核心代码 1. 使用CommonFormItem完成基本结构label和contentBuilder属性 2. 在roomAdd页面使用CommonRadioFormItem 3. 完善contentBuilder 4. 处理选项及点击事件使用Radio 5. 完善细节 3. 测试 1. 让按钮可点击 ### 4.50、 发布房源页-CommonSelectFormItem 【操作步骤】 1. 准备 1. 新建文件widgets/common_select_form_item.dart 2. 添加material依赖，添加无状态组件，添加并初始化参数 2. 核心代码 1. 使用CommonFormItem完成基本结构 2. 在roomAdd页面使用CommonSelectFormItem 3. 完善细节 3. 测试 ### 4.51、 发布房源页-CommonPicker-分析 【分析结论】 1. CommonPicker.showPicker是一个class的静态方法 2. 半屏弹窗——showCupertinoModalPopup 3. 选择区域——CupertinoPicker ### 4.52、 发布房源页-CommonPicker-主体结构 【操作步骤】 1. 准备 1. 新建文件utils/common_picker/index.dart 2. 引入material和cupertino依赖 3. 完善类及静态方法的主体结构 4. 在CommonSelectFormItem中使用CommonPicker 2. 核心编码 1. 使用showCupertinoModalPopup返回Future 2. 完善内容区header部分 3. 使用CupertinoPicker完善内容区body部分 3. 测试及完善 1. 使用CommonPicker 2. 完善细节 ### 4.53、 发布房源页-CommonPicker-细节和事件 【操作步骤】 1. 细节 1. 半屏高度 2. 事件 1. 在roomAdd页面添加状态 2. 添加事件处理函数 3. 完善CommonSelectFormItem的事件处理部分 4. 完善CommonPicker的事件处理部分 3. 测试 ### 4.54、 发布房源页-房屋图像-主体结构 【操作步骤】 1. 准备 1. 添加文件widgets/common_image_picker.dart 2. 添加material依赖 3. 准备测试图片数据 4. 创建有状态组件 5. 在roomAdd页面使用CommonImagePicker 2. 核心编码 1. 准备图片宽高 2. 准备添加图片按钮 3. 准备图片wrapper函数 4. 展示图片及添加按钮 3. 测试 ### 4.55、 发布房源页-房屋图像-添加删除 【操作步骤】 1. 准备 1. 安装image_picker依赖 2. 引入image_picker依赖 2. 核心代码 1. 实现添加图片逻辑 1. 添加状态files 2. 图片数据使用files 3. 添加方法pickImage 4. addButton添加事件 5. 测试 2. 实现图片删除逻辑 1. 添加删除图标 2. 实现删除事件 3. 测试 ### 4.56、 发布房源页-房屋标题描述 【操作步骤】 1. 添加房屋标题 1. 提示文案：请输入标题（例如：整租，小区名2室2000元） 2. 添加房屋描述 1. 提示文案：请输入房屋描述信息 3. 添加controller 4. 测试及细节完善 ### 4.57、 发布房源页-房屋配置-分析 【操作步骤】 1. 准备图标 2. 创建文件widgets/room_appliance.dart 3. 准备数据 4. CommonCheckButton实现 ### 4.58、 发布房源页-房屋配置-实现 【操作步骤】 1. 准备 1. 添加material依赖 2. 添加有状态组件 3. 添加并初始化参数 2. 核心编码 1. 完成主体结构 2. 使用RoomAppliance 3. 添加点击事件 3. 测试&完善 ### 4.59、 房屋详情页-分析 ### 4.60、 房屋详情页面-主体结构 【操作步骤】 1. 准备 1. 将RoomDetailPage转成有状态组件 2. 安装share_plus: ^4.0.4依赖 3. 添加pages/room_detail/data.dart,并粘贴之前准备的代码 2. 核心编码 1. 完善appBar部分主体结构 2. 添加分享按钮 3. 使用Stack完善body的主体结构 4. 完善底部按钮区域 3. 测试&完善细节 1. 修改widgets/room_list_item_widget.dart添加点击事件 2. 修改pages/home/tab_search/dataList.dart修改id 3. 测试 ### 4.61、 房屋详情页面-底部按钮 【操作步骤】 1. 添加收藏按钮 2. 添加'联系房东'按钮 3. 添加'预约看房'按钮 4. 添加收藏事件及展示 5. 测试 ### 4.62、 房屋详情页面-房屋图片&房屋基本信息 【操作步骤】 1. 添加 图片 2. 添加 价格 3. 添加 标签 4. 添加 分割线 5. 测试 ### 4.63、 房屋详情页面-房屋详细信息 【操作步骤】 1. 添加Container Wrap结构 2. 实现【面积】部分 3. 重构组件 4. 实现【楼层】【房型】【装修】 5. 测试 ### 4.64、 房屋详情页面-房屋配置 【操作步骤】 1. 打开文件widgets/room_appliance.dart 2. 创建无状态组件RoomApplianceList 3. 添加并初始化参数final List list; 4. 完善内容部分 5. 在pages/room_detail/index.dart使用RoomApplianceList 6. 完善细节 7. 测试 ### 4.65、 房屋详情页面-房屋概况&猜你喜欢 【操作步骤】 1. 添加container和container.padding,Column 2. 添加Text用于显示房屋概况 3. 添加按钮区域(收起/举报) 4. 添加状态showAllText=false和showTextTool变量。 5. 根据showAllText和showTextTool显示相应内容 6. 添加事件控制showAllText; 7. 添加Info() ### 4.66、 filterBar-分析 ### 4.67、 filterBar-展示区域 【操作步骤】 1. 准备 1. 新建文件pages/home/tab_search/filter_bar/data.dart,填充数据 2. 新建文件pages/home/tab_search/filter_bar/index.dart 3. 引入material依赖，创建有状态组件，添加并初始化参数 2. 核心编码 1. 编写基本结构，解决外边框样式问题 2. 在tabSearch页面中使用Filter_bar 3. 编写filterBar的item组件 4. 使用item组件 ### 4.68、 filterBar-picker部分 【操作步骤】 1. 添加4个按钮的激活状态 2. 添加4个结果值 3. 添加4个相应事件 4. 添加_onChange方法用于通知FilterBar的父组件 5. 完成【区域】选择的picker部分 6. 参照【区域】完成【方式】和【租金】的picker部分 7. 【筛选】先使用空白函数 ### 4.69、 filterBar-drawer部分-展示部分 【操作步骤】 1. 准备 1. 创建文件pages/home/tab_search/filter_bar/filter_drawer.dart 2. 添加material依赖，添加无状态组件 2. 核心编码 1. 实现页面基本结构 2. 在tabSearch页面中使用FilterDrawer 3. 实现选项按钮 4. 将选项按钮提取成组件FilterDrawerItem 3. 完善细节 1. 隐藏Drawer按钮 2. 打开Drawer ### 4.70、 filterBar-drawer部分-数据分析 【结论】 使用全局状态，基于scoped_model实现 ### 4.71、 filterBar-drawer部分-ScopedModel-model 【实现】 1. 创建文件scoped_model/room_filter.dart 2. 添加scoped_model依赖 3. 编写model基本结构 4. 实现model数据结构 5. 实现model方法 6. 实现ScopedModelHelper ### 4.72、 filterBar-drawer部分-ScopedModelHelper 【实现】 1. 添加文件utils/scoped_model_helper.dart 2. 添加scopedModel和material依赖 3. 实现类基本结构 4. 实现静态方法getModel ### 4.73、 filterBar-drawer部分-ScopedModel 【操作步骤】 1. application中添加Model 2. 在FilterBar的initState生命周期set dataList(Map> data) 3. 在FilterBar的didChangeDependencies生命周期Set get selectedList 4. 在FilterDrawer的build函数中Map> get dataList 5. 在FilterDrawer的Item点击事件中selectedListToggleItem(String data) 6. 测试 7. 优化 ### 5.1、 介绍Dio 【结论】 使用dio作为app的网络请求工具 Dio对HttpClient的封装，增加了一些功能如拦截器，全局配置，请求取消等。 ### 5.2、 封装DioHttp 【编码】 1. 创建文件utils/dio_http.dart 2. 添加dio, material依赖 3. 完成DioHttp的基本结构 4. 完成初始化部分 5. 完成get方法 6. 完成post方法 7. 完成postData方法 ### 5.3、 注册页联调 【操作步骤】 1. 接口文档分析（使用python fastapi做临时后端服务，详见backend/README.md文档） 2. 打开页面pages/register.dart 3. 在_RegisterPageState添加3个TextEditingController，并赋给3个TextField 4. 添加处理函数_registerHandle() async {}, 并在注册按钮事件中调用 5. 处理注册逻辑 1. 获取TextFeild值 2. 处理输入异常 3. 发送网络请求 4. 处理异常返回 5. 跳转到登录页面 6. 测试 ### 5.4、 登录页联调--分析 【问题】 1. 登录状态怎么和其他页面同步？ 2. 再次打开app，是否需要二次登录？ 3. 登录过期如何处理？ 【分析】 1. 使用ScopedModel同步登录信息（token） 2. 登录成功后，将token写入本地存储；添加一个app启动页，app启动的时候，加载token! 3. 在DioHttp中添加Dio拦截器，当登录过期时，打开登录页。 ### 5.5、 封装Store 【实现步骤】 1. 新建文件/utils/store.dart 2. 添加shared_preferences 3. 编写类的基本结构 4. 实现初始化方法 5. 实现getString setString getStringList setStringList 6. 添加storeKeys