Flutter开发小技巧

0 前言

本文测试机型为: 小米10，红米7 

开发环境为：

Flutter 1.20.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision fba99f6cf9 (3 months ago) • 2020-09-14 15:32:52 -0700
Engine • revision d1bc06f032
Tools • Dart 2.9.2

目录

1.实现沉浸状态栏

2.禁止横竖屏切换

3.字符串颜色转换

…(更新中)…

1.flutter实现沉浸状态栏

先看效果 对比图

图上可以看到

图一

是没有处理状态的样子，我们的内容区域已经在顶部状态栏显示了。并且状态栏上比如时间，一些图标都是白色的样式，
我们就算通过padding或者margin的方式让内容区域向下便宜，由于背景是白色 所以也会看不见我们的状态栏上时间等信息。

图二

可以看到我们的内容部分是在状态栏之下的，并且状态栏为白色，图标颜色也变成了黑色，也不会像图一一样看不清楚，
并且也没有图一的默认灰色状态栏颜色。达到了沉浸的效果。

下面看看代码对比，看看我们做了哪些处理

第一部分代码对比：

可以看到我们添加了一部分代码，用于控制状态栏颜色等信息的指定和修改。

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  //状态栏相关
  statusBarColor: Colors.transparent, //状态栏透明
  statusBarIconBrightness: Brightness.dark, //图标暗色或亮色模式
  statusBarBrightness: Platform.isAndroid ? Brightness.dark : Brightness.light,
  systemNavigationBarColor: Colors.white,
  systemNavigationBarDividerColor: Colors.grey,
  systemNavigationBarIconBrightness: Brightness.dark,
));

通过以上代码 ，我们能够指定我们的状态栏和NavigationBar等信息的一些颜色状态。

接着看第二部分的修改

我们在下面的代码只在内容区域上包裹了一层SafeArea widgets，便可以达到效果，关于SafeArea Widget的用法大家可以参考我的
这一片文章Flutter开发者必知必会的十个开发小技巧

到这里我们就完成了沉浸状态栏的实现。

2.Flutter禁止横竖屏切换

需要在main方法中处理

void main() async{

  WidgetsFlutterBinding.ensureInitialized(); //必须在runApp之前调用

//如果为横屏应用则可以改为DeviceOrientation.landscapeLeft 或者 landscapeRight

  await SystemChrome.setPreferredOrientations(
      <DeviceOrientation>[DeviceOrientation.portraitUp,  
						 DeviceOrientation.portraitDown])
      .then((_) => runApp(MyApp()));

}

3.字符串颜色转换

工具代码

class HexColor extends Color {
  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));

  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll('#', '');
    if (hexColor.length == 6) {
      hexColor = 'FF' + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }
}

方便我们在使用字符串颜色值的时候快速转换颜色值。

如：

Container( color: HexColor("#ffffff") )

当然可以参考Android的方法，我们单独建立一个color的类来管理我们通用的颜色，比如这样

新建一个colors.dart类文件

import 'dart:ui';
//系统已经有一个Colors的类，所以建一个我们自己名字的Mycolor类文件
class MyColors {
  MyColors._();
  
  static Color common_text_color = HexColor("#666666");
}

class HexColor extends Color {
  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));

  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll('#', '');
    if (hexColor.length == 6) {
      hexColor = 'FF' + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }
}

在使用的时候我们就可以通过以下方式来使用了。

Container(color:  MyColor.common_text_color )