自定义小部件

一套自定义 Flutter 小部件,可帮助您节省布局构建时间。

添加插件

基本用法(CustomCheck)

   CustomCheck(
      value: true,
      activeColor: Colors.green,
      type: CheckType.circle,
      size: 24,  
      onChanged: (value){
        
      },
    )
  • 自定义构建器

CustomCheck(
   value: value,
   activeColor: Colors.green,
   type: CheckType.circle,
   size: 24,
   builder: (ctx, size) {
     return Icon(
       Icons.star,
       color: Colors.white,
       size: size,
     );
   },
   onChanged: (value) {
     
   },
 )

基本用法(CustomSwitch)

  CustomSwitch(
      value: value,
      activeColor: Colors.green, 
      pointColor: Colors.white, 
      onChanged: (value){
        
      },
    )

基本用法(Txt)

  Txt(
    'Click here',
    textSize: 28,
    textAlign: TextAlign.center,
    rich: Rich(
        key: 'here',
        onRichTap: (value) {
          print('onRichTap: ${value}'); 
        },
        style: TextStyle(
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline
            )
        ),
  )

Txt(
    'click_message',
     textSize: 28,
     textAlign: TextAlign.center,
     builderText: (value) => 'Click here',
),

基本用法(Button)

  • 默认按钮

DefaultButton(
     value: 'Click',
     activeColor: Colors.green,
     textColor: Colors.white,
     onPressed: () {},
) 
  • 自定义进度按钮

 CustomProgressButton(
      isLoading: isLoading,
      border: 16.0,
      ignorePlatform: true,
      onPressed: () async {
        setState(() => isLoading = !isLoading);
        await Future.delayed(Duration(seconds: 2));
        setState(() => isLoading = !isLoading);
      },
      value: 'Click',
      activeColor: Colors.green,
 )

预览(CustomCheck)

预览(CustomSwitch)

示例

|

当前可用的小部件

  • 开关
  • 复选框
  • 文本
  • 按钮

如果您有任何希望在此应用中看到的功能,请随时提出建议!?

别忘了给它一个⭐,这会激励我分享更多的开源项目。

GitHub

查看 Github