这一个flutter的ui库

用户1974410

发布于 2022-09-20 16:36:40

1K0

发布于 2022-09-20 16:36:40

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

flutter的UI库

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

具体的功能

主题会提供默认的主题，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,
        );
}