背景
從Flutter發(fā)布beta版本就一直在關(guān)注Flutter薪韩、很多大廠也都在使用Flutter比如字節(jié)跳動今日頭條、西瓜視頻土陪、阿里爸爸的閑魚煤蹭、毒APP笔喉，包括我們公司(一個(gè)賣菜的公司)也在部分非主流程頁面使用Flutter。都說Flutter極其流暢漂亮硝皂，本著再不學(xué)習(xí)就老了的心態(tài)常挚，于是準(zhǔn)備抽些閑暇時(shí)間來嘗試下Flutter。最近小端午放假APP的幾個(gè)頁面也搭建的差不多了稽物，本著人人為我奄毡、我為人人的精神決定寫個(gè)blog給大家分享一下。
為什么仿JD APP姨裸？
因?yàn)橄馢D這種電商APP無論是業(yè)務(wù)邏輯還是頁面復(fù)雜度都是比較復(fù)雜的秧倾，一來可以體驗(yàn)一下Flutter在復(fù)雜頁面流暢度的表現(xiàn)，二來也可以看下到底Flutter是否能真正投入生產(chǎn)環(huán)境中傀缩。
首頁
Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-26 at 17.33.25.png
| 功能 | 方案 |
|---|---|
| 搜索滾動吸頂 | SliverAppBar + FlexibleSpaceBar |
| Banner輪播 | flutter_swiper |
| 貨架 | PageView+GridView |
| 推薦列表 | flutter_swiper |
分類
image.png
| 功能 | 方案 |
|---|---|
| banner | flutter_swipper |
| 掃一掃 | barcode_scan |
購物車
image.png
| 功能 | 方案 |
|---|---|
| 商品選擇 | |
| 倒計(jì)時(shí) | Timer.periodic |
| 商品數(shù)量增減 | 自定義組件 |
我的
image.png
| 功能 | 方案 |
|---|---|
| header滾動漸變 | 監(jiān)聽滾動位置設(shè)置Appbar opacity |
| 其它 | 頁面效果還原 |
商詳
I love China, love huawei
image.png
image.png
| 功能 | 方案 | 備注 |
|---|---|---|
| header滾動漸變 | 無 | |
| 商品輪播圖 | flutter_swiper | 無 |
| 地址選擇 | city_pickers | 無 |
| 規(guī)格選擇 | showCupertinoModalPopup | 無 |
| 商品詳情圖 | webview_flutter | TODO Android 超過5500高度會黑屏崩潰 需要等待網(wǎng)頁加載結(jié)束獲取網(wǎng)頁高度后重新設(shè)置webview高度否則會內(nèi)存溢出 |
設(shè)置
image.png
注冊登錄
image.png
| 功能 | 方案 | 備注 |
|---|---|---|
| 登錄注冊 | leancloud | 注冊登錄圖省事，整了一個(gè)頁面（點(diǎn)注冊按鈕即使用當(dāng)前輸入的用戶名密碼注冊） |
| 賬密 | 賬號 admin 密碼 admin | 無 |
GIT倉庫地址
APP端：
https://github.com/DiscoverForever/learn_flutter
Server端：
https://github.com/DiscoverForever/flutter_mock_server
??歡迎PR 覺得不錯(cuò)的可以給個(gè)star?
?????? 警告：真機(jī)運(yùn)行 lib/api/api.dart中的baseUrl需要修改為你的本機(jī)IP ??????
項(xiàng)目目錄結(jié)構(gòu)
image.png
項(xiàng)目使用第三方庫一覽
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ò)請求
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)請聯(lián)系作者刪除
??本APP接口數(shù)據(jù)均為mock赡艰，請勿用于其它商業(yè)目的
??如使用本項(xiàng)目代碼造成侵權(quán)與作者無關(guān)
我這求生欲??
