CircleButton constructor

const CircleButton({
  1. Key? key,
  2. required Widget icon,
  3. EdgeInsetsGeometry? clickAreaMargin = const Pad(all: 3.0, left: 3.5),
  4. Color? tapColor = Colors.white24,
  5. Color? hoverColor,
  6. Border? border,
  7. VoidCallback? onTap,
  8. Color backgroundColor = Colors.transparent,
  9. double size = defaultSize,
  10. EdgeInsetsGeometry? iconPadding,
  11. double? elevation,
  12. MouseCursor? cursor = SystemMouseCursors.click,
  13. CircleButtonBuilder? builder,
  14. bool debugShowClickableArea = false,
})

Circular button, similar to IconButton, but with the following differences:

  • The icon will be displayed inside the button.

  • A clickAreaMargin can be set, defining a rectangle around the circle, and all that rectangle is clickable, so that it's easier to click the button.

  • The backgroundColor: The background color of the button.

  • The tapColor is shown when the button is tapped-down.

  • The hoverColor is shown when the mouse is over the button.

  • elevation: The elevation of the button.

  • The onTap is the callback called when the button is tapped. If it's null, the tapColor will still be applied. This allows the button to be used inside of other widgets that detect gestures.

  • size: The size of the button.

  • iconPadding: The padding around the icon inside the button.

  • border: The border of the button.

  • cursor: The mouse cursor to be shown when hovering over the button.

  • clickAreaMargin: The margin around the circle that is also clickable.

  • colorOfClickableArea is the color of the clickable area, which is only shown when debugShowClickableArea is set to true, for debugging purposes. Otherwise, it's transparent.

  • builder: An optional custom builder function to modify the button's child widget. This can be used to animate the button when the button is tapped, or when the mouse is over it.

Implementation

const CircleButton({
  Key? key,
  required this.icon,
  this.clickAreaMargin = const Pad(all: 3.0, left: 3.5),
  this.tapColor = Colors.white24,
  this.hoverColor,
  this.border,
  this.onTap,
  this.backgroundColor = Colors.transparent,
  this.size = defaultSize,
  this.iconPadding,
  this.elevation,
  this.cursor = SystemMouseCursors.click,
  this.builder,
  bool debugShowClickableArea = false,
})  : colorOfClickableArea =
          debugShowClickableArea ? const Color(0xBBFF0000) : const Color(0x00000000),
      super(key: key);