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外掛庫
實際效果
