Flutter 沉浸式狀態欄 及 修改狀態欄字體顏色

效果圖

實現代碼

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(
      MaterialApp(
    debugShowCheckedModeBanner: false,
    title: '測試程序',
    theme: ThemeData(primaryColor: Colors.greenAccent),
    home: MyApp(),
  ));
  if (Platform.isAndroid) {
    //實現沉浸式狀態欄
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //第一種修改狀態欄字體顏色
    return Scaffold(
      appBar: AppBar(
        title: Text('data'),
        centerTitle: true,
        brightness: Brightness.light, //Brightness.dark 有appbar實現方式
      ),
      body: Container(
        color: Colors.amber,
      ),
    );
    //第二種修改狀態欄字體顏色
    return AnnotatedRegion<SystemUiOverlayStyle>(
        child: Container(
          color: Colors.amber,
        ),
        value: SystemUiOverlayStyle.dark //SystemUiOverlayStyle.light 兩種樣式
        );
  }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章