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插件庫

實際效果