写一个flutter的UI库

297 阅读1分钟

最近没更新,因为我去炒币了,结果当然是亏了很多钱。还是老老实实上班吧。

flutter的UI库

准备做一个flutter的UI库,名为stoneUI,封装一些常用的组件,方便大家使用。也为后面搭建一个框架做准备。 因为没有UI设计,所以打算直接使用mobile-ant-design,如果大家有什么好的建议也可以给我留言。 先放地址:github.com/taleStone/f… 目前只实现了一点功能,欢迎大家和我一起建设。

具体的功能

  1. 主题 会提供默认的主题,darkMode和lightMode,当然也支持自定义。

ColorPalette

定义了组件中一些常用的颜色,大家可以在此基础上扩展,自定义自己的主题色,目前提供深色和浅色两种。
abstract class ColorPalette {
  ///主色调
  Color primary({StoneOpacity opacity});

  Color primaryDark({StoneOpacity opacity});

  Color primaryLight({StoneOpacity opacity});

  /// 警告
  Color warning({StoneOpacity opacity});

  /// 前景色
  Color accent({StoneOpacity opacity});

  ///背景色
  Color background({StoneOpacity opacity});

  Color surfaceElevation({StoneOpacity opacity});

  Color surfaceFlat({StoneOpacity opacity});

  Color critical({StoneOpacity opacity});

  /// 标题
  Color title({StoneOpacity opacity});

  Color titleLight({StoneOpacity opacity});

  /// 禁用
  Color disable({StoneOpacity opacity});

  /// 文本
  Color text({StoneOpacity opacity});

  Color textLight({StoneOpacity opacity});

  Color success({StoneOpacity opacity});

  Color error({StoneOpacity opacity});

  Color getColor(Color color, StoneOpacity opacity) =>
      opacity == null ? color : opacity.applyForColor(color);
}

TextStyle

字体风格也可以自己定义

class StoneTextTheme extends TextTheme {
  final TextStyle cover;

  final TextStyle h0;

  final TextStyle h1;

  final TextStyle h2;

  final TextStyle h3;

  final TextStyle body;

  final TextStyle subtitle;

  final TextStyle caption;

  final TextStyle overline;

  StoneTextTheme({
    this.cover,
    this.h0,
    this.h1,
    this.h2,
    this.h3,
    this.body,
    this.subtitle,
    this.caption,
    this.overline,
  }) : super(
          headline1: cover,
          headline2: cover,
          headline3: cover,
          headline4: h0,
          headline5: h1,
          headline6: h2,
          subtitle1: h3,
          bodyText1: body,
          bodyText2: body,
          caption: caption,
          button: body,
          subtitle2: subtitle,
          overline: overline,
        );
}

主题切换

主题切换使用的bloc,当然大家也可以使用自己喜欢的状态管理实现 2. 支持哪些组件 打算根据mobile-ant-design的组件来实现