Flutter之去除半透明状态栏,修改状态栏颜色

23 min read
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  	// 除半透明状态栏
    if (Theme.of(context).platform == TargetPlatform.android) {
      // android 平台
      SystemUiOverlayStyle _style =
          SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(_style);
    }
    return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        home: LeftDrawerHome());
  }
}

class LeftDrawerHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LeftDrawerHomeState();
  }
}

class LeftDrawerHomeState extends State<LeftDrawerHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true, // 标题居中
        title: Text(
          "标题名",
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.white, // 背景白色
        elevation: 0, // 去除阴影
        brightness: Brightness.light, // 状态栏白底黑字
      ),
    );
  }
}



二级封装后

class ScreenUtil {
  ///去除状态栏半透明
  ///[context] 上下文
  static removeSystemTransparent(BuildContext context) {
    /// android 平台
    if (Theme.of(context).platform == TargetPlatform.android) {
      SystemUiOverlayStyle _style = const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
      );
      SystemChrome.setSystemUIOverlayStyle(_style);
    }
  }
}

使用

class SplashPage extends StatelessWidget {

  const SplashPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.removeSystemTransparent(context);
    ///预缓存背景图片
    precacheImage(const AssetImage(R.assetsImagesLoginBackground), context);
    return const Scaffold(
      backgroundColor: Colors.white,
      body: SplashAnimWidget()
    );
  }

}