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.

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:

Large
Medium (default)
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 fuiColorScheme parameter. 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.

26 March 2025

Focus Theme UI Kit Documentation Help