Flutter自定義導(dǎo)航欄更改狀態(tài)欄顏色兼容Android,IOS

flutter自定義導(dǎo)航欄更改狀態(tài)欄顏色兼容Android叉信,IOS

flutter下自定義導(dǎo)航欄更改狀態(tài)欄背景顏色和字體顏色亩冬,測試ios、Android有效

前言

flutter最近火得有些過分,做為一名后端我都想試試它硅急。國內(nèi)目前關(guān)于flutter的文檔還是挺少的覆享,很多問題都難以找到解決方案。最近在使用flutter也遇見了不少的問題营袜,就拿更改flutter狀態(tài)欄背景撒顿、字體顏色來說道說道,在百度荚板、google上隨便一搜都有一大堆的文章說明如何使用flutter屬性來實(shí)現(xiàn)凤壁,但是在真正自己實(shí)際開發(fā)中發(fā)現(xiàn)并不能達(dá)到預(yù)期的目的,ios跪另,android不同平臺上沒有真正解決實(shí)際問題拧抖。下面解決辦親測ios、Android有效

屬性

  • AnnotatedRegion<SystemUiOverlayStyle>
  • AppBar

兩個屬性都可以達(dá)到更改狀態(tài)欄的目的免绿,但是在真機(jī)開發(fā)過程中發(fā)現(xiàn) AnnotatedRegion 在ios下無法達(dá)到預(yù)期的效果字體和顏色都沒有改變唧席,AppBar 在Android下也不能達(dá)到預(yù)期效果。并且 AnnotatedRegion 在頁面上存 在appBar 下的情況下不會生效嘲驾。解決辦法就是通過Theme.of(context).platform判斷當(dāng)前是ios還是android根據(jù)不同的平臺使用不同的屬性淌哟,具體代實(shí)現(xiàn)碼如下

  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(   // android 更改狀態(tài)欄顏色
      value: SystemUiOverlayStyle(
          statusBarColor: Colors.white,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Colors.white,
      ),
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: PreferredSize(      //ios下更改狀態(tài)欄顏色
          //判斷是是否是android,是android需去掉AppBar辽故,否則無AnnotatedRegion無效
          child: Theme.of(context).platform == TargetPlatform.android   
              ? Container()
              : AppBar(backgroundColor: Colors.white, elevation: 0),
          preferredSize: Size.fromHeight(0),
        ),
        body:Text('hello world'),
      )
    )
  }

查看源碼發(fā)現(xiàn)SystemUiOverlayStyle有dark和light兩個自帶的屬性徒仓,SystemUiOverlayStyle.dark和SystemUiOverlayStyle.light在ios是效果的,但是只能修改狀態(tài)的字體顏色但是無法修改背景顏色

上面的示例代碼在ios黑暗模式下狀態(tài)欄的字體顏色默認(rèn)是白色的榕暇,關(guān)于ios黑暗模式的問題解決辦法也有很多請自行g(shù)oogle

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蓬衡,一起剝皮案震驚了整個濱河市喻杈,隨后出現(xiàn)的幾起案子彤枢,更是在濱河造成了極大的恐慌,老刑警劉巖筒饰,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缴啡,死亡現(xiàn)場離奇詭異,居然都是意外死亡瓷们,警方通過查閱死者的電腦和手機(jī)业栅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谬晕,“玉大人碘裕,你說我怎么就攤上這事≡芮” “怎么了帮孔?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我文兢,道長晤斩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任姆坚,我火速辦了婚禮澳泵,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘兼呵。我一直安慰自己兔辅,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布击喂。 她就那樣靜靜地躺著幢妄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪茫负。 梳的紋絲不亂的頭發(fā)上蕉鸳,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機(jī)與錄音忍法,去河邊找鬼潮尝。 笑死,一個胖子當(dāng)著我的面吹牛饿序,可吹牛的內(nèi)容都是我干的勉失。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼原探,長吁一口氣:“原來是場噩夢啊……” “哼乱凿!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起咽弦,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤徒蟆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后型型,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體段审,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年闹蒜,在試婚紗的時候發(fā)現(xiàn)自己被綠了寺枉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡绷落,死狀恐怖姥闪,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情砌烁,我是刑警寧澤筐喳,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響疏唾,放射性物質(zhì)發(fā)生泄漏蓄氧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一槐脏、第九天 我趴在偏房一處隱蔽的房頂上張望喉童。 院中可真熱鬧,春花似錦顿天、人聲如沸堂氯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咽白。三九已至,卻和暖如春鸟缕,著一層夾襖步出監(jiān)牢的瞬間晶框,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工懂从, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留授段,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓番甩,卻偏偏與公主長得像侵贵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子缘薛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容