FRadio<T> constructor

FRadio<T>({
  1. Key? key,
  2. required T? value,
  3. required T? groupValue,
  4. ValueChanged<T?>? onChanged,
  5. double width = 27,
  6. double height = 27,
  7. bool enable = true,
  8. bool toggleable = false,
  9. FocusNode? focusNode,
  10. bool autofocus = false,
  11. Color selectedColor = const Color(0xff2593fc),
  12. Color normalColor = const Color(0xffd9d9d9),
  13. bool hasSpace = true,
  14. double? border,
  15. Widget? child,
  16. Widget? selectedChild,
  17. Widget? hoverChild,
  18. Gradient? gradient,
  19. Duration duration = const Duration(milliseconds: 150),
  20. bool fill = true,
  21. FRadioCorner? corner,
})

默认情况下，FRadio 有一套十分灵活的样式风格。 开发者无需自己配置 normal、selected、disableNormal、disableSelected 以及 hover。 FRadio 提供了丰富的配置选项，以帮助开发者快速完成视图的构建。 如果在应用中有独特的设计，可以使用 FRadio.custom 来完成特殊样式的构建。FRadio 将帮助开发者完成状态管理的构建。

By default, FRadio has a very flexible style. Developers do not need to configure normal, selected, disableNormal, disableSelected, and hover themselves. FRadio provides a wealth of configuration options to help developers quickly complete the construction of the view. If you have a unique design in your application, you can use FRadio.custom to complete the construction of special styles. FRadio will help developers complete the construction of state management.

一般参数 (General parameters)：

selectedColor 选中状态下的颜色 (Selected color)

normalColor 未选中状态下的颜色 (Unselected color)

hasSpace 内部填充和边缘是否有间距。 默认为 true。间距由 FSuper 提供黄金比例，开发者无需关心。 (Is there a gap between the inner padding and the edges. The default is true. The spacing is provided by FSuper the golden ratio, developers do not need to care.)

border 边框宽。默认由 FSuper 提供黄金比例，开发者无需关心。 (The border is wide. The default is true. The spacing is provided by FSuper the golden ratio, developers do not need to care.)

child 未选中状态下的装饰组件，处于最上层级。 (The decoration components in the unselected state are at the top level.)

selectedChild 选中状态下的装饰组件，处于最上层级。 (The decorative component in the selected state is at the top level.)

hoverChild 鼠标悬停时的装饰组件，处于最上层级。 (The decoration component when hovering the mouse is at the top level.)

gradient 该属性允许配置选中状态下的渐变效果，会覆盖 selectedColor 。 (This property allows to configure the gradient effect in the selected state, which will override selectedColor.)

duration 状态切换动画时长。默认 150ms。 (Duration of state switching animation. The default is 150ms.)

fill 选中时，是否允许内部填充。默认为 true。 (When selected, whether to allow internal filling. The default is true.)

corner 边角。默认 FRadio 为圆形。 (Corner. The default FRadio is round.)

Implementation

FRadio({
  Key? key,
  required this.value,
  required this.groupValue,
  this.onChanged,
  this.width = 27,
  this.height = 27,
  this.enable = true,
  this.toggleable = false,
  this.focusNode,
  this.autofocus = false,
  Color selectedColor = const Color(0xff2593fc),
  Color normalColor = const Color(0xffd9d9d9),
  bool hasSpace = true,
  double? border,
  Widget? child,
  Widget? selectedChild,
  Widget? hoverChild,
  Gradient? gradient,
  Duration duration = const Duration(milliseconds: 150),
  bool fill = true,
  FRadioCorner? corner,
}) : super(key: key) {
  if (hoverChild == null) {
    hoverChild = selectedChild;
  }
  border = border ?? width * 0.075;
  BorderRadius borderRadius = corner == null
      ? BorderRadius.all(Radius.circular(width / 2.0))
      : BorderRadius.only(
          topLeft: Radius.circular(corner.leftTopCorner),
          topRight: Radius.circular(corner.rightTopCorner),
          bottomRight: Radius.circular(corner.rightBottomCorner),
          bottomLeft: Radius.circular(corner.leftBottomCorner),
        );
  selected = AnimatedContainer(
    duration: duration,
    decoration: BoxDecoration(
      border: Border.all(
          color: (hasSpace || !fill) ? selectedColor : Colors.transparent,
          width: (hasSpace || !fill) ? border : 0),
      borderRadius: borderRadius,
    ),
    child: Container(
      width: width,
      height: height,
      alignment: Alignment.center,
      child: AnimatedContainer(
        duration: duration,
        width: hasSpace ? width * 0.518 : width,
        height: hasSpace ? height * 0.518 : height,
        decoration: fill
            ? BoxDecoration(
                color: selectedColor,
                borderRadius: borderRadius,
                gradient: gradient,
              )
            : null,
      ),
    ),
  );
  selected = Stack(
    alignment: Alignment.center,
    children: [
      selected!,
      selectedChild ?? Container(),
    ],
  );
  normal = AnimatedContainer(
    duration: duration,
    decoration: BoxDecoration(
      border: Border.all(color: normalColor, width: border),
      borderRadius: borderRadius,
    ),
    child: Container(
      width: width,
      height: height,
      alignment: Alignment.center,
      child: AnimatedContainer(
        duration: duration,
        width: 0,
        height: 0,
        decoration: fill
            ? BoxDecoration(
                color: normalColor,
                borderRadius: borderRadius,
              )
            : null,
      ),
    ),
  );
  normal = Stack(
    alignment: Alignment.center,
    children: [
      normal!,
      child ?? Container(),
    ],
  );
  if (kIsWeb == true) {
    disableSelected = Container(
      foregroundDecoration: BoxDecoration(color: Color(0xfff1f1f1).withOpacity(0.6)),
      child: selected,
    );
    disableNormal = Container(
      foregroundDecoration: BoxDecoration(color: Color(0xfff1f1f1).withOpacity(0.6)),
      child: normal,
    );
  } else {
    disableSelected = ColorFiltered(
      colorFilter: ColorFilter.mode(
          Color(0xfff1f1f1).withOpacity(0.6), BlendMode.srcATop),
      child: selected,
    );
    disableNormal = ColorFiltered(
      colorFilter: ColorFilter.mode(
          Color(0xfff1f1f1).withOpacity(0.6), BlendMode.srcATop),
      child: normal,
    );
  }

  hover = AnimatedContainer(
    duration: duration,
    decoration: BoxDecoration(
      border: Border.all(color: selectedColor, width: border),
      borderRadius: borderRadius,
    ),
    child: Container(
      width: width,
      height: height,
      alignment: Alignment.center,
      child: AnimatedContainer(
        duration: duration,
        width: 0,
        height: 0,
        decoration: fill
            ? BoxDecoration(
                color: selectedColor,
                borderRadius: borderRadius,
                gradient: gradient,
              )
            : null,
      ),
    ),
  );
  hover = Stack(
    alignment: Alignment.center,
    children: [
      hover!,
      hoverChild ?? Container(),
    ],
  );
}