背景
從Flutter發(fā)布beta版本就一直在關(guān)注Flutter、很多大廠也都在使用Flutter比如字節(jié)跳動(dòng)今日頭條、西瓜視頻、阿里爸爸的閑魚(yú)、毒APP，包括我們公司(一個(gè)賣菜的公司)也在部分非主流程頁(yè)面使用Flutter。都說(shuō)Flutter極其流暢漂亮，本著再不學(xué)習(xí)就老了的心態(tài)，于是準(zhǔn)備抽些閑暇時(shí)間來(lái)嘗試下Flutter。最近小端午放假APP的幾個(gè)頁(yè)面也搭建的差不多了，本著人人為我、我為人人的精神決定寫(xiě)個(gè)blog給大家分享一下。
為什么仿JD APP？
因?yàn)橄馢D這種電商APP無(wú)論是業(yè)務(wù)邏輯還是頁(yè)面復(fù)雜度都是比較復(fù)雜的，一來(lái)可以體驗(yàn)一下Flutter在復(fù)雜頁(yè)面流暢度的表現(xiàn)，二來(lái)也可以看下到底Flutter是否能真正投入生產(chǎn)環(huán)境中。
首頁(yè)
Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-26 at 17.33.25.png
| 功能 | 方案 |
|---|---|
| 搜索滾動(dòng)吸頂 | SliverAppBar + FlexibleSpaceBar |
| Banner輪播 | flutter_swiper |
| 貨架 | PageView+GridView |
| 推薦列表 | flutter_swiper |
分類
image.png
| 功能 | 方案 |
|---|---|
| banner | flutter_swipper |
| 掃一掃 | barcode_scan |
購(gòu)物車
image.png
| 功能 | 方案 |
|---|---|
| 商品選擇 | |
| 倒計(jì)時(shí) | Timer.periodic |
| 商品數(shù)量增減 | 自定義組件 |
我的
image.png
| 功能 | 方案 |
|---|---|
| header滾動(dòng)漸變 | 監(jiān)聽(tīng)滾動(dòng)位置設(shè)置Appbar opacity |
| 其它 | 頁(yè)面效果還原 |
商詳
I love China, love huawei
image.png
image.png
| 功能 | 方案 | 備注 |
|---|---|---|
| header滾動(dòng)漸變 | 無(wú) | |
| 商品輪播圖 | flutter_swiper | 無(wú) |
| 地址選擇 | city_pickers | 無(wú) |
| 規(guī)格選擇 | showCupertinoModalPopup | 無(wú) |
| 商品詳情圖 | webview_flutter | TODO Android 超過(guò)5500高度會(huì)黑屏崩潰 需要等待網(wǎng)頁(yè)加載結(jié)束獲取網(wǎng)頁(yè)高度后重新設(shè)置webview高度否則會(huì)內(nèi)存溢出 |
設(shè)置
image.png
注冊(cè)登錄
image.png
| 功能 | 方案 | 備注 |
|---|---|---|
| 登錄注冊(cè) | leancloud | 注冊(cè)登錄圖省事，整了一個(gè)頁(yè)面（點(diǎn)注冊(cè)按鈕即使用當(dāng)前輸入的用戶名密碼注冊(cè)） |
| 賬密 | 賬號(hào) admin 密碼 admin | 無(wú) |
GIT倉(cāng)庫(kù)地址
APP端：
https://github.com/DiscoverForever/learn_flutter
Server端：
https://github.com/DiscoverForever/flutter_mock_server
??歡迎PR 覺(jué)得不錯(cuò)的可以給個(gè)star?
?????? 警告：真機(jī)運(yùn)行 lib/api/api.dart中的baseUrl需要修改為你的本機(jī)IP ??????
項(xiàng)目目錄結(jié)構(gòu)
image.png
項(xiàng)目使用第三方庫(kù)一覽
name: learn_flutter
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.2.2 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
# 輪播插件
flutter_swiper: ^1.1.6
# toast
fluttertoast: ^4.0.1
# 網(wǎng)絡(luò)請(qǐng)求
dio: ^3.0.8
# webview
# flutter_webview_plugin: ^0.3.5
# webview
webview_flutter: ^0.3.19
json_annotation: ^3.0.0
# 城市選擇器
city_pickers: ^0.1.30
# 掃描插件
barcode_scan: ^2.0.1
# Leancloud
leancloud_storage: ^0.2.3
# 官方緩存插件
shared_preferences: ^0.5.6
# provide
provide: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# json generator
build_runner: ^1.0.0
json_serializable: ^3.3.0
uses-material-design: true
assets:
- lib/assets/json/movie.json
fonts:
- family: FlamanteRoma
fonts:
- asset: lib/assets/fonts/Flamante-Roma-Medium.ttf
- asset: lib/assets/fonts/Flamante-Roma-MediumItalic.ttf
- family: LatoBold
fonts:
- asset: lib/assets/fonts/Lato-Bold.ttf
- family: PingFang
fonts:
- asset: lib/assets/fonts/PingFang.ttf
免責(zé)聲明
??本APP僅限于學(xué)習(xí)交流使用，項(xiàng)目中使用的圖片及字體等資源如有侵權(quán)請(qǐng)聯(lián)系作者刪除
??本APP接口數(shù)據(jù)均為mock，請(qǐng)勿用于其它商業(yè)目的
??如使用本項(xiàng)目代碼造成侵權(quán)與作者無(wú)關(guān)
我這求生欲??
