StyledButton

StyledButton

StyledButton is a customizable and user-friendly button component in the Flood toolkit that simplifies the creation of interactive and visually consistent buttons. It supports three emphasis levels (subtle, regular, and strong) and allows for the inclusion of text labels, icons, or both. The button's appearance can be customized using the labelText, label, iconData, or icon properties, providing flexibility in designing the button's content. StyledButton handles user interactions through the onPressed callback, which can be used to trigger actions or perform asynchronous operations. When an asynchronous onPressed callback is in progress, the button automatically prevents further presses until the operation completes, ensuring a smooth user experience. Additionally, if only an icon is provided, StyledButton renders as an icon button, offering a compact and intuitive way to represent actions.

StyledButton.subtle(
  labelText: 'Subtle',
  iconData: Icons.border_clear,
  onPressed: () {},
),
StyledButton(
  labelText: 'Regular',
  icon: StyledIcon( // You can use `icon` instead of `iconData` if you want to use a widget
    Icons.square,
  ),
  onPressed: () {},
),
StyledButton.strong(
  labelText: 'Strong',
  onPressed: () async {
    // If pressed again while loading, it will not trigger [onPressed] until the first one finishes loading.
    print('Loading');
    await Future.delayed(Duration(seconds: 1));
    print('Done');
  },
),
StyledButton(
  iconData: Icons.circle_notifications, // If only an icon is set, it will be an "icon button".
  onPressed: () {
    print('Pressed Icon button');
  },
),

StyledButton Demonstration