Flutter實(shí)戰(zhàn)：擼半個(gè)知乎日?qǐng)?bào)

感謝 知乎日?qǐng)?bào)-API-分析 提供的api幫助完成這個(gè)demo

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、松嶺網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為松嶺等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

該項(xiàng)目完全開源，單純?yōu)榱藢W(xué)習(xí)與交流，希望大家喜歡，多多提意見。

后續(xù)會(huì)將未來學(xué)到的新知識(shí)點(diǎn)用到該項(xiàng)目，持續(xù)更新

1.今日熱點(diǎn)

2.主題分類

3.文章詳情

4.抽屜列表增加緩存, 防止多次拉去數(shù)據(jù)

5.評(píng)論列表 (界面，動(dòng)畫優(yōu)化)

6.主題列表 (界面，動(dòng)畫優(yōu)化)

7.主頁(yè)banner自動(dòng)輪播,手指滑動(dòng)是禁止輪播，放開則繼續(xù)

8.刷新數(shù)據(jù)失敗，增加重試按鈕

9.分享UI

9.登錄UI，聯(lián)動(dòng)交互（在評(píng)論界面可以點(diǎn)擊寫點(diǎn)評(píng)進(jìn)入）

1.Flutter加載Html

1.注冊(cè)

2.登錄

3.發(fā)表評(píng)論

4.收藏

5.等等

Flutter混合開發(fā)實(shí)戰(zhàn)

之前開發(fā)了一個(gè)純Flutter的項(xiàng)目，結(jié)果接到個(gè)新的需求需要使用Flutter單獨(dú)開一個(gè)模塊集成到原有的android項(xiàng)目中

下面分享一下如何集成現(xiàn)有的項(xiàng)目和如何繼承以及碰到的問題

1.首先第一步 修改gradle

因?yàn)?Flutter 當(dāng)前僅支持為 x86_64，armeabi-v7a 和 arm64-v8a 構(gòu)建預(yù)編（AOT）的庫(kù) 所以我們需要修改gradle的文件限制 APK 中支持的架構(gòu)，從而避免 libflutter.so找不到引起的崩潰

2.新建一個(gè)FlutterModel的工程

2.使用aar文件 因?yàn)樗泄こ探y(tǒng)一使用jenkins打包所以我們放在本地肯定是不合適的

說以我們需要 打包aar并上傳服務(wù)器

上傳完成后在android中引用

在開發(fā)中遇到的問題

1.關(guān)于android和Ios中的跳轉(zhuǎn)傳參問題

這個(gè)問題在android端還是比較方便的 但是的在Ios端并不怎么好實(shí)現(xiàn)

最終決定使用flutter_boost來完成android和Ios與Flutter的通信操作

flutter_boost github地址：

集成文檔：

集成文檔給出了 但是沒有android的 尷尬

下滿分享下android的集成

（1）在flutter的 pubspec.yaml工程中添加

（2）修改android工程

使用本地工程的時(shí)候需要在工程共添加

使用aar的時(shí)候不需要添加

（3）在android工程中添加對(duì)應(yīng)的條狀路由配置

（4）在使用默認(rèn)的flutter_boost啟動(dòng)界面的時(shí)候可能碰到狀態(tài)欄丟失的情況

所以最好集成BoostFlutterActivity寫一個(gè)新的activity方便處理狀態(tài)欄和activity進(jìn)出動(dòng)畫

（5）跳轉(zhuǎn)并傳參

//params 傳多個(gè)參數(shù)可以使用json的形式

2.在flutter中的網(wǎng)絡(luò)框架使用的dio結(jié)果在ios的彈出loading的時(shí)候出現(xiàn)卡頓現(xiàn)象

解決方式：1.服務(wù)換證書 （但是后臺(tái)太忙暫時(shí)沒有支持的人員）

2.ios使用原生的loading解決

3.在使用dio的時(shí)候出現(xiàn)ios部分手機(jī) 網(wǎng)絡(luò)請(qǐng)求緩慢問題

解決方法：請(qǐng)求的時(shí)候使用http 2.0協(xié)議

插件地址：

Flutter上線項(xiàng)目實(shí)戰(zhàn)——Vap視頻動(dòng)畫

透明視頻動(dòng)畫是目前比較流行的實(shí)現(xiàn)動(dòng)畫的一種, 大廠也相繼開源自己的框架，最終我們選中 騰訊vap ，它支持了Android、IOS、Web，為我們封裝flutter_vap提供了天然的便利，并且它提供了將幀圖片生成帶alpha通道視頻的工具，這簡(jiǎn)直太贊了。

VAP（Video Animation Player）是企鵝電競(jìng)開發(fā)，用于播放酷炫動(dòng)畫的實(shí)現(xiàn)方案。

video for youtube

video for qiniu

apk download

github

Flutter實(shí)戰(zhàn)巧之-showModalBottomSheet 高度自適應(yīng)

showModalBottomSheet 所彈出的內(nèi)容高度是固定的。要想自適應(yīng)自己布局的高度只需如下兩點(diǎn)：

加入 isScrollControlled: true 后，彈窗高度會(huì)變成全屏的。接下來就是自己布局中的處理。

BottomPhotoDialog是我自己寫的想要彈出的布局。在根節(jié)點(diǎn)中用SingleChildScrollView來包裹Column即可讓彈窗高度適應(yīng)布局高度