FUIButtonOutlinedCircleIcon

Similar to the FUIButtonBlockCircleIcon, the FUIButtonOutlinedCircleIcon circle icon button features a circle button with colored border and a colored icon, rather than a full-colored background.

Widget Class Location

The FUIButtonOutlinedCircleIcon widget classes could be found in:

lib/focus_ui_kit/components/button/fui_button_outlined_circle_icon.dart

The FUIButtonTheme class is the theme class holds the default theme variables/values.

Accessing the theme

To access the theme class object, do the following:

@override
Widget build(BuildContext context) {
    FUIButtonTheme buttonTheme = context.theme.fuiButton;
    
    // ...
}

Usage

The FUIButtonOutlinedCircleIcon widget is developer-friendly and requires minimal configuration. It can be utilized by providing an icon and an onPressed callback, as demonstrated below:

FUIButtonOutlinedCircleIcon(
    icon: Icon(CupertinoIcons.arrow_right),
    onPressed: () {},
);

Changing the size

Different sizes could be configured for the FUIButtonOutlinedCircleIcon, namely:

1. Large

2. Medium (default)

3. Small

This can be accomplished by configuring the fuiButtonSize parameter, which accepts values from the FUIButtonSize enumeration.

/// Large
FUIButtonOutlinedCircleIcon(
    icon: Icon(CupertinoIcons.arrow_right),
    fuiButtonSize: FUIButtonSize.large,
    onPressed: () {},
);

/// Medium (default)
FUIButtonOutlinedCircleIcon(
    icon: Icon(CupertinoIcons.arrow_right),
    fuiButtonSize: FUIButtonSize.medium,
    onPressed: () {},
);

/// Small
FUIButtonOutlinedCircleIcon(
    icon: Icon(CupertinoIcons.arrow_right),
    fuiButtonSize: FUIButtonSize.small,
    onPressed: () {},
);

Changing the color scheme

The FUIButtonOutlinedCircleIcon can be customized with a different color scheme by configuring the fuiColorSchemeparameter. This parameter accepts values from the FUIColorScheme enum, allowing for flexibility in color selection.

FUIButtonOutlinedCircleIcon(
    fuiColorScheme: FUIColorScheme.success,
    icon: Icon(CupertinoIcons.arrow_right),
    onPressed: () {},
);

Enabling / Disabling with Controller

The FUIButtonOutlinedCircleIcon enables or disables the button by utilizing a controller.

This functionality can be accomplished through the FUIButtonController controller.

/// Define the controller (usually in the initState function)
FUIButtonController btnCtrl = FUIButtonController();

/// Attached it with a FUIButtonOutlinedCircleIcon widget.
FUIButtonOutlinedCircleIcon(
    fuiButtonController: btnCtrl,
    icon: Icon(CupertinoIcons.check_mark),
    onPressed: () {},
);

/// Toggle enable
btnCtrl.trigger(FUIButtonEvent(
    enable: true,
));

/// Toggle disable
btnCtrl.trigger(FUIButtonEvent(
    enable: false,
));

/// Close the controller (do this in the dispose function)
btnCtrl.close();

Major Parameters

Parameters	Description
Icon icon	The icon for the button.
FUIColorScheme fuiColorScheme	The desired color scheme of the button.
FUIButtonSize fuiButtonSize	The desired pre-configured size of the button
FUIButtonController? fuiButtonController	The controller to toggle enable / disable for the button.
Color? borderColor	Overrides the border color.

Other parameters

The other parameters corresponds to the ones available in OutlinedButton.