Flutter主题及状态栏设置

Flutter主题及状态栏设置,第1张

一、依赖

只需要原生ioservices即可。

功能主要为可以自定义AppBar及整体页面布局。

1. 状态栏管理

主要使用如下

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

SystemUiOverlayStyle value;
if(Platform.isAndroid){
  value = SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, /// 安卓系统状态栏存在底色,所以需要加这个
    statusBarIconBrightness: Brightness.dark, /// 状态栏字体颜色
  );
} /// 仅IOS可直接使用:SystemUiOverlayStyle.dark, 状态栏主题色,表现为dart:黑色,light:白色
AnnotatedRegion(
  value: value
  child: Scaffold(
    body: Widget
  )
)
二、使用
import 'dart:io';
import 'package:flutter/services.dart';

customerTheme(bool inset, SystemUiOverlayStyle value, Widget body, {BoxDecoration? boxDecoration, Function()? onTap, bool willPop = false}){
  if(Platform.isAndroid){
    value = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    );
  }
  return AnnotatedRegion(
      value: value,
      child: Scaffold(
          resizeToAvoidBottomInset: inset, /// true时body和scaffold的浮动窗口小部件应自行调整大小,避免键盘d出时溢出
          body: willPop ? WillPopScope( /// 阻止左滑动或安卓返回键退出
            onWillPop: () async {
              return true;
            },
            child: GestureDetector(
              onTap: onTap,
              child: Container(
                height: double.infinity,
                width: double.infinity,
                decoration: boxDecoration,
                child: body,
                margin: EdgeInsets.only(top: 10.dp),
              ),
            ),
          ) : GestureDetector(
            onTap: onTap,
            child: Container(
              height: double.infinity,
              width: double.infinity,
              decoration: boxDecoration,
              child: Column(
                children: [
                  Get.getHeightBox(10.dp),
                  Expanded(child: body)
                ],
              ),
            ),
          )
      )
  );
}

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/993465.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-21
下一篇2022-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存