Flutter 仿携程旅行 APP

xiechengwang_app

一款仿携程旅行 Flutter App 学自CrazyCodeBoy课程

源码下载

下载 点击下载应用

扫描下载

目录

• 主要页面，包括首页、搜索、旅拍和个人四个主页面
• 依赖库
• 实际效果

主要页面

• 总体框架采用PageView + BottomNavigationBar ，每一个页面的状态保存采用AutomaticKeepAliveClientMixin

• 首页

  • 全面屏适配，体如今顶部搜索框距离状态栏的距离，项目内笔者采用的是 MediaQueryData.fromWindow(window).padding.top 获得状态栏高度进行适配，固然也可使用SafeArea来包裹页面。(使用了Scaffold的appbar与bottomNavigationBar是不须要适配的，由于Scaffold框架会自动帮咱们完成这些适配工做)
  • 轮播图主要采用的是Swiper控件
  • 列表采用ListView控件，若是数据过多，须要上拉加载建议使用ListView的Builder方法进行服用View
  • 主页总体布局采用了Stack + MediaQuery.removePadding + RefreshIndicator + appBar
  • 经过对Container进行alpha设置实现appBar的颜色渐变

• 搜索

  • 语音识别采用百度API，native接入百度语音识别API，这里须要注意build.gradle的设置，因为笔者是经过新建android模块，因此须要仿照主app的build.gradle对fltter引入，才能导入MethodChannel相关类。此处涉及Flutter与native通讯，两端方法名须要一致。
  • 语音识别后自动跳转就行搜索，利用ListView显示数据，用到FractionallySizedBox控件撑满屏幕宽度，利用Expand设置权重，我的感受Expand等价于LinearLayout，flex属性和weight属性相似

• 旅拍

  • TabBar + Flexible+ TabBarView
  • RefreshIndicator + StaggeredGridView + Stack + Card + PhysicalModel 实现下拉刷新 上拉加载
  • 文字固定宽度 LimitedBox
  • 圆形图片使用 PhysicalModel 圆角设置为控件长/宽一半

• 个人

  • WebView

• 网页加载

  • 全部点击功能采用GestureDetector控件实现，网页使用WebView(利用FlutterWebviewPlugin控件自定义)控件加载
  • 固然也能够利用webview_flutter插件替代上述自定义WebView

• 网络

  • 采用Http get和post请求，json解析
  • 接口在项目内

依赖库

• flutter_swiper: ^1.1.4
• http: ^0.12.0+4
• flutter_webview_plugin: ^0.3.10+1
• flutter_staggered_grid_view: ^0.3.0
• flutter_splash_screen: ^0.1.0
• Flutter插件开发 Flutter插件库

实际效果