Mac環(huán)境下的flutter配置及安裝

最近在公司比較空閑，正好又重新申請(qǐng)換了臺(tái)m1開發(fā)。順便花點(diǎn)時(shí)間把flutter配置和安裝時(shí)遇到的問題梳理了一下，相關(guān)報(bào)錯(cuò)截圖未保存，純屬記錄自己的flutter之旅，那現(xiàn)在就開始吧～

大渡口ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

安裝可參考鏈接：Flutter中文網(wǎng)

Flutter踩坑之旅

記錄下自己踩過的坑,怕忘了

一.TextField:

1.去掉輸入數(shù)字的計(jì)數(shù):decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉獲取和失去焦點(diǎn)時(shí)邊框改變顏色的效果:decoration內(nèi)border: InputBorder.none,

3.去邊框時(shí)設(shè)置BorderSide的width為0或color: Colors.transparent后依然存在邊框時(shí),需要設(shè)置為borderSide: BorderSide.none

4.設(shè)置背景色需要在decoration內(nèi) ? ? filled:true, ? fillColor: Colors.blue同時(shí)設(shè)置才會(huì)顯示

二.Uint8List類型和string類型,Listint的轉(zhuǎn)換

連續(xù)兩次base64解碼時(shí),參數(shù)只能使用string類型,但是base64解碼后是Uint8List類型,此時(shí)需要將Uint8List類型轉(zhuǎn)換為string類型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint轉(zhuǎn)Uint8List:讀取接口時(shí)獲取的數(shù)據(jù)是Listint的圖片數(shù)據(jù),想顯示時(shí)需要轉(zhuǎn)成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.報(bào)錯(cuò):DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

這是因?yàn)閐io請(qǐng)求返回的數(shù)據(jù)默認(rèn)是以json的格式讀取的,而返回的數(shù)據(jù)是密文形式,需要修改dio的Options的responseType為ResponseType.PLAIN,這樣返回的數(shù)據(jù)就以字符串形式處理.

四.去掉點(diǎn)擊控件背景出現(xiàn)的水波紋效果,即去掉md的效果:

在main.dart的MaterialApp內(nèi)的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局設(shè)置占滿全屏卻無(wú)效的問題

使用Scaffold的body的布局默認(rèn)是沉浸式的,將狀態(tài)欄一起包含了,可以通過在body后添加一層SafeArea即可.

布局設(shè)置double.infinity占滿全屏高度卻無(wú)效,大部分情況都是因?yàn)槟骋患?jí)的父布局的高度已經(jīng)有了限制,所以設(shè)置充滿屏幕只會(huì)充滿父布局,有些widget默認(rèn)是按內(nèi)容填充類似wrap_content就會(huì)導(dǎo)致寫布局的過程中自己沒有限制高度但最后的布局不是自己想要的,可以給各個(gè)父布局設(shè)置不同背景顏色來(lái)查看是從哪兒開始被限制了高度來(lái)排查問題.

六.占滿剩余空間,類似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator設(shè)置進(jìn)度值的顏色為單一顏色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.給LinearProgressIndicator設(shè)置圓角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多層column且內(nèi)容的高度都不確定需要占滿剩余空間,需要每層的column的內(nèi)容都嵌套一層expanded來(lái)申明每層都占滿剩余的空間,否則最里面的內(nèi)容層需要指定高度,不然會(huì)報(bào)錯(cuò)

九.Container設(shè)置最小/大寬度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑動(dòng)的widget嵌套:

1.解決滑動(dòng)沖突:內(nèi)層嵌套的滑動(dòng)widget設(shè)置physics:NeverScrollableScrollPhysics()

2.解決滑動(dòng)嵌套u(yù)i顯示不出來(lái)或者報(bào)錯(cuò),內(nèi)層的滑動(dòng)widget設(shè)置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓運(yùn)行報(bào)錯(cuò)Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties內(nèi)添加android.enableJetifier=true和android.useAndroidX=true并點(diǎn)擊右上角的open for editing in android studio,運(yùn)行成功后就可以了

十二.使用textfield時(shí)的文字ui總是很高

使用了maxlength且只是在textfield的InputDecoration設(shè)置counterStyle的顏色為透明使下面的計(jì)數(shù)文字消失會(huì)導(dǎo)致文字ui很高,counter的計(jì)數(shù)文字只是顏色是透明但依然在布局中占了位置所以導(dǎo)致文字很高,直接使用counterText:""即可

十三.使用ListView報(bào)錯(cuò)Vertical viewport was given unbounded height

需要將ListView放入Expanded內(nèi)部

Flutter之旅 02 - 創(chuàng)建第一個(gè)項(xiàng)目

Flutter項(xiàng)目可以用三種方式開發(fā)：

可以根據(jù)自己的需求選擇，由于之前一直做iOS開發(fā)，也做過RN項(xiàng)目開發(fā)，Mac上裝過Android Studio 和 其他安卓模擬器 Genymotion ，所以我選擇Android Studio開發(fā)工具，之前裝的版本 3.0.1 比較老了，所以進(jìn)行了升級(jí) 3.4 。

體驗(yàn)Flutter

PS：第一次創(chuàng)建項(xiàng)目可以成功，之后再執(zhí)行這一步操作創(chuàng)建新的Flutter項(xiàng)目時(shí)，一直卡住，重啟過很多次Android Studio一直都是這樣，后面查詢資料，發(fā)現(xiàn)自己沒有同意使用 android-licenses ，可以通過下列命令驗(yàn)證，第一步，先驗(yàn)證：

第一步檢測(cè)結(jié)果，發(fā)現(xiàn)是需要同意 android-licenses ：

第二步執(zhí)行同意命令，操作時(shí)會(huì)有很多個(gè) android-licenses 需要同意：

第二步檢測(cè)結(jié)果：

第三步再次驗(yàn)證，當(dāng)?shù)玫揭韵陆貓D中結(jié)果時(shí)，代表所有環(huán)境配置已經(jīng)完成：

上述命令創(chuàng)建一個(gè)Flutter項(xiàng)目，項(xiàng)目名為 myapp ，在項(xiàng)目目錄中，有安卓和iOS兩個(gè)項(xiàng)目目錄。

Android Studio中會(huì)列出所有已經(jīng)連接了電腦的設(shè)備，包括安卓和iPhone。如果想在模擬器上運(yùn)行，下面可以選擇對(duì)應(yīng)的模擬器，如圖：

PS：如果想在模擬器上運(yùn)行，需要先安裝一個(gè)模擬器，選擇Tools AVD Manager，如圖：

然后選擇Create Virtual Device，根據(jù)提示一步一步操作即可（建議翻墻條件下操作），添加完成后就可以在這個(gè)界面看到自己已經(jīng)添加的模擬器，點(diǎn)擊綠色的運(yùn)行按鈕，即可打開該模擬器：

Flutter筆記-調(diào)用原生IOS高德地圖sdk

2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團(tuán)隊(duì)部分維護(hù)的項(xiàng)目用React Native技術(shù)混合開發(fā)。為適應(yīng)環(huán)境變化，開啟瘋狂RN學(xué)習(xí)之旅，晚上回來(lái)啃資料看視頻。可能由于本身對(duì)RN技術(shù)體驗(yàn)不感冒或者在環(huán)境之下強(qiáng)迫學(xué)習(xí)有點(diǎn)不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關(guān)注并利用閑余時(shí)間開始探索。2018年一直學(xué)習(xí)到使用Flutter寫項(xiàng)目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因?yàn)椴糠挚丶杏X還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項(xiàng)目中嚴(yán)重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因?yàn)槲冶旧硎且幻鸻ndroid開發(fā)人員，初學(xué)IOS并記錄下來(lái)。

PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。

在我們實(shí)際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來(lái)實(shí)現(xiàn)部分功能，但是原生View在 flutter 中會(huì)遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無(wú)法很好的與 flutter 項(xiàng)目結(jié)合。

1、info.plist文件設(shè)置

2、 ios 端實(shí)現(xiàn)原生組件PlatformView提供原生view

3 、ios 端創(chuàng)建PlatformViewFactory用于生成PlatformView

4、 ios 端創(chuàng)建FlutterPlugin用于注冊(cè)原生組件

5 、flutter 平臺(tái)嵌入 原生view

iOS端的UiKitView目前還只是preview狀態(tài), 默認(rèn)是不支持的, 需要手動(dòng)打開開關(guān), 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.

創(chuàng)建類 FlutterMapView 并實(shí)現(xiàn)FlutterPlatformView 協(xié)議

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請(qǐng)前往 高德開放平臺(tái)控制臺(tái) 申請(qǐng) iOS Key。

注意：Bundle Identifier需要與申請(qǐng)的時(shí)候填寫的一致

地圖依賴的庫(kù)列舉如下：

基礎(chǔ) SDK AMapFoundationKit.framework

第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點(diǎn)擊“+”按鈕，在彈出的窗口中點(diǎn)擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。

千萬(wàn)不要忘記將AMapFoundationKit也一起加入工程。

3D地圖正確配置應(yīng)如下圖所示：

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲(chǔ)了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。

左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。

成功跑起來(lái) 。。 。