3、Flutter中ThemeData與AppBar

本次主要是記錄Fultter Theme主題的設(shè)備與AppBar中的一些屬性的使用及說(shuō)明。目前項(xiàng)目開(kāi)發(fā)有了四個(gè)界面。前期主題沒(méi)太注意，今天看來(lái)要好好總結(jié)一下近期所學(xué)。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),田林企業(yè)網(wǎng)站建設(shè),田林品牌網(wǎng)站建設(shè),網(wǎng)站定制,田林網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,田林網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

首先，Android主題沉浸式設(shè)置，F(xiàn)lutter篇：

根據(jù)字面意思就能看出來(lái)是對(duì)狀態(tài)懶得設(shè)置，其中用到了 dart:io 與 flutter/services.dart 這兩個(gè)重點(diǎn)Mark一下，有時(shí)間深入探究一下用法跟能力。回歸正題。

主題數(shù)據(jù)，其中最常用的是 primarySwatch 、 primaryColor 、 accentColor 。

primarySwatch:UI右下角的FloatingActionButton的顏色就是默認(rèn)取值MaterialColor，

默認(rèn)是藍(lán)色的，如果修改成primarySwatch，就會(huì)變成這個(gè)顏色值。只支持MaterialColor。

primaryColor：頂部導(dǎo)航欄和狀態(tài)欄的顏色修改，需要用到這個(gè)屬性，類型 Color。

accentColor：前景色（文本、按鈕、覆蓋邊緣效果等)。

看一下項(xiàng)目中的使用

其中 brightness 主題設(shè)置較為關(guān)鍵，它是設(shè)置狀態(tài)欄圖標(biāo)與字體顏色的。

brightness: Brightness.dark 狀態(tài)欄圖標(biāo)與字體顏色為白色。

brightness: Brightness.light 狀態(tài)欄圖標(biāo)與字體顏色為黑色。

iconTheme ：設(shè)置appbar icon的顏色，appbar中icon的顏色會(huì)根據(jù)primaryColor的改變來(lái)確定自身的顏色，這里可以在iconTheme中指定icon的顏色。

默認(rèn)不做修改前：

Flutter踩坑之旅

記錄下自己踩過(guò)的坑,怕忘了

一.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ú)效的問(wèn)題

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

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

六.占滿剩余空間,類似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沉浸式狀態(tài)欄

手機(jī)上面的電量時(shí)間的那一排信息，背景變成完全透明文字可切換黑色和白色的時(shí)候說(shuō)明實(shí)現(xiàn)了沉浸式狀態(tài)欄。

Flutter筆記(三)：設(shè)置白色狀態(tài)欄

在App設(shè)計(jì)中狀態(tài)欄純色的這種設(shè)計(jì)很常見(jiàn)，但是如果狀態(tài)欄需要為白色的時(shí)候就必須為黑色字體。在Android中已經(jīng)有很多成熟的方案來(lái)處理這種情況，那我們現(xiàn)在看看在Flutter中這種情況該怎么處理。

這里的ThemeData即為控制App的主題，primarySwatch設(shè)置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設(shè)置primarySwatch為Colors.white。

注：MaterialColor包含以下這些

那么就只能使用其他方式設(shè)置主題為白色。即為設(shè)置

此時(shí)我們可以看到App的狀態(tài)欄如下所示（Android）

雖然AppBar變成了白色，但是狀態(tài)欄是灰色顯然不是我們想要的。

嘗試設(shè)置文字顏色，AppBar的Brightness有兩種模式light和dark

這個(gè)和SystemUiOverlayStyle的light和dark剛好相反

然后設(shè)置狀態(tài)欄顏色

設(shè)置為紅色之后，得到以下的樣式，可以看到狀態(tài)欄為紅色了，文字為白色

那么接下來(lái)我們只需要將狀態(tài)欄設(shè)置為白色或者透明，狀態(tài)欄文字設(shè)置為黑色。

最后得到以下視圖

注：使用PreferredSize包裹，可以更得心應(yīng)手哦！

SystemUiOverlayStyle在設(shè)置時(shí)其實(shí)有很多系統(tǒng)或者版本的限制

[Flutter]使用主題

flutter設(shè)置沉浸式狀態(tài)欄

）