Flutter1.0初学开发项目时进行主题简单封装

一、设置模式key

dart
///普通模式key
const String PRIMARY = 'PRIMARY';

///暗黑模式key
const String DIABLOMODE = 'DIABLOMODE';

二、定义主题色

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

class SkinElement{

  final Color primaryFFFFFF;
  final Color primary000000;

 final Color primary00CCA9;
 final  Color primaryFFBB33;
 final Color primary409EFF;
 final Color primaryFF6666;


 final Color primary303133;
 final Color primary606266;
 final Color primary909399;
 final Color primaryC0C4CC;


 final Color primaryD9D9D9;
 final Color primaryE6E6E6;
 final Color primaryF5F5F5;

 final  double fontSize11;
 final  double fontSize12;
 final double fontSize13;
 final double fontSize14;
 final double fontSize15;
 final double fontSize16;
 final double fontSize18;
 final double fontSize20;
 final double fontSize30;
  final double fontSize36;
 SkinElement(
     {
       this.primary00CCA9 = const Color(0XFF00CCA9),
       this.primaryFFFFFF = const Color(0XFFFFFFFF),
       this.primary000000 = const Color(0XFF000000),
       this.primaryFFBB33 = const Color(0XFFFFBB33),
       this.primary409EFF = const Color(0XFF409EFF),
       this.primaryFF6666 = const Color(0XFFFF6666),
       this.primary303133 = const Color(0XFF303133),
       this.primary606266 = const Color(0XFF606266),
       this.primary909399 = const Color(0XFF909399),
       this.primaryC0C4CC = const Color(0XFFC0C4CC),
       this.primaryD9D9D9 = const Color(0XFFD9D9D9),
       this.primaryE6E6E6 = const Color(0XFFE6E6E6),
       this.primaryF5F5F5 = const Color(0XFFF5F5F5),
       this.fontSize11 = 11.0,
       this.fontSize12 = 12.0,
       this.fontSize13 = 13.0,
       this.fontSize14 = 14.0,
       this.fontSize15 = 15.0,
       this.fontSize16 = 16.0,
       this.fontSize18 = 18.0,
       this.fontSize20 = 20.0,
       this.fontSize30 = 30.0,
       this.fontSize36 = 36.0
     });

}

三、根据模式切换主题

dart
  ///根据模式更换颜色
  static SkinElement _getColor(){
    switch(App.themeColorString){
      case ColorMode.PRIMARY :
        return SkinElement();
      case ColorMode.DIABLOMODE :
        return SkinElement();
      default :
        return SkinElement();
    }
  }

四、处理不透明度

dart
/// 自动根据设计稿不透明度计算出具有透明度的颜色
  /// @param opacity 不透明度
  /// @param  color 颜色值
  /// @return color
  /// @author 
  /// created at 2020/5/27 16:41
  static Color getOpacityColor(int opacity,Color color){
    ///根据不透明度计算成透明度
    double _percent = (opacity == 0 || opacity <0) ? 0 : (opacity / 100);
    int _length = color.value.toString().length;
    if(_length == 10 && _percent != 0){
      ///根据透明度计算成十六进制透明度
      String _hexadecimal = (_percent * 255).round().toRadixString(16);
      ///获取颜色value值并转成16进制
      String _intString = color.value.toRadixString(16).toString();

      ///获取传入的十六进制数
      String _hexadecimalColor = _intString.substring(2,_intString.length);
    return Color(_hexToInt('$_hexadecimal$_hexadecimalColor'));
    }
    return color;
  }
  
  /// 十六进制字符串转成int类型
  /// @param  hex 十六进制字符串
  /// @return int
  /// @author 
  /// created at 2020/5/27 16:39
  ///
  static int _hexToInt(String hex) {
    int val = 0;
    int len = hex.length;
    for (int i = 0; i < len; i++) {
      int hexDigit = hex.codeUnitAt(i);
      if (hexDigit >= 48 && hexDigit <= 57) {
        val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
      } else if (hexDigit >= 65 && hexDigit <= 70) {
        // A..F
        val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
      } else if (hexDigit >= 97 && hexDigit <= 102) {
        // a..f
        val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
      } else {
        throw new FormatException("Invalid hexadecimal value");
      }
    }
    return val;
  }

五、项目调用

dart
static SkinElement rcColor = _getColor();

六、可以新抽出透明度管理

七、抽离透明度原因

flutter 颜色自带Color属性有透明度相关方法但是抽出颜色管理后,根据赋值后的颜色去调用Color自带的透明度

在编译时不会报错,但是运行后会报错