Understanding Flutter's ElevatedButton Widget: Properties and Example

In Flutter, UI components are essential for creating interactive and visually appealing mobile applications. One of the most commonly used widgets for creating interactive buttons is the ElevatedButton. It’s part of the material design widgets in Flutter and provides a high-level abstraction for creating buttons that can perform actions when clicked or tapped.

What is an ElevatedButton?

The ElevatedButton is a material design button that has a “raised” effect, meaning it appears elevated above the surrounding UI. It has a shadow and a background color, which can be customized. The primary purpose of an elevated button is to offer the user an easy-to-tap, visually prominent control element that performs some action on click.

Key Properties of ElevatedButton

Let’s go through the most important properties of the ElevatedButton widget.

1. onPressed

Type: VoidCallback?
Description: The callback that is invoked when the button is pressed. It is required for the button to be functional. If set to null, the button will be disabled, and no action will be triggered when pressed.

  ElevatedButton(
    onPressed: () {
      print("Button Pressed!");
    },
    child: Text("Click Me"),
  );

2. onLongPress

Type: VoidCallback?
Description: The callback that is invoked when the user long presses the button. This is optional and can be used to trigger a secondary action when the button is held down.

  ElevatedButton(
    onPressed: () {
      print("Button Pressed!");
    },
    onLongPress: () {
      print("Button Long Pressed!");
    },
    child: Text("Press Me"),
  );

3. style

Type: ButtonStyle?
Description: A ButtonStyle object that allows you to customize the appearance of the button, including the background color, padding, elevation, and more. You can use the ElevatedButton.styleFrom() factory method to quickly create a ButtonStyle with various attributes.

dartCopy codeElevatedButton(
  onPressed: () {
    print("Button Pressed!");
  },
  child: Text("Styled Button"),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,    // Background color
    onPrimary: Colors.white, // Text color
    padding: EdgeInsets.all(16), // Padding around the button content
    elevation: 5, // Shadow depth
  ),
);

4. autofocus

Type: bool
Description: When set to true, the button automatically receives focus when the widget is first built. This is especially useful for accessibility features or when managing focus programmatically.

dartCopy codeElevatedButton(
  onPressed: () {
    print("Button Pressed!");
  },
  autofocus: true,
  child: Text("Autofocus Button"),
);

5. focusNode

Type: FocusNode?
Description: A FocusNode object that controls and listens for changes in the focus state of the button. This is useful when you need to manually manage focus or track focus changes, for example, when working with a form or keyboard interactions.

dartCopy codeFocusNode myFocusNode = FocusNode();

ElevatedButton(
  onPressed: () {
    print("Button Pressed!");
  },
  focusNode: myFocusNode,
  child: Text("Focus Node Button"),
);

6. clipBehavior

Type: Clip
Description: Controls how the button clips its child widget. The Clip enum has the following values:
- Clip.none: No clipping.
- Clip.hardEdge: Clips to the edge of the button (sharp corners).
- Clip.antiAlias: Applies anti-aliasing to the clipped content.

dartCopy codeElevatedButton(
  onPressed: () {
    print("Button Pressed!");
  },
  clipBehavior: Clip.antiAlias,
  child: Text("Clipped Button"),
);

7. enabled

Type: bool?
Description: This property determines whether the button is enabled or disabled. If set to false, the button is rendered as inactive, and it won't respond to taps or any user interaction.

dartCopy codeElevatedButton(
  onPressed: null,  // Disables the button
  child: Text("Disabled Button"),
);

8. onHover

Type: PointerEventListener?
Description: This property allows you to handle hover events. It is a callback that gets triggered when a pointer hovers over the button (primarily for web and desktop platforms). This is useful for implementing custom hover effects.

dartCopy codeElevatedButton(
  onPressed: () {},
  onHover: (isHovered) {
    if (isHovered) {
      print("Button is being hovered");
    }
  },
  child: Text("Hover Over Me"),
);

9. onFocusChange

Type: ValueChanged<bool>?
Description: This callback is invoked when the button gains or loses focus. It’s useful when you need to track focus changes programmatically or trigger certain effects (like animations) when the button receives focus.

dartCopy codeElevatedButton(
  onPressed: () {},
  onFocusChange: (hasFocus) {
    if (hasFocus) {
      print("Button has focus");
    } else {
      print("Button lost focus");
    }
  },
  child: Text("Focus Change Button"),
);

10. mouseCursor

Type: MouseCursor?
Description: The mouse cursor that is displayed when the user hovers over the button (primarily for web and desktop applications). You can customize the cursor to be a pointer, text, or other types.

dartCopy codeElevatedButton(
  onPressed: () {},
  mouseCursor: SystemMouseCursors.click,  // Sets the cursor to a "clickable" state
  child: Text("Mouse Cursor Button"),
);

11. visualDensity

Type: VisualDensity?
Description: This property controls the overall density of the button, adjusting the amount of space between the button's content and its edges. This is useful for adapting to different screen sizes or accessibility settings.

dartCopy codeElevatedButton(
  onPressed: () {},
  visualDensity: VisualDensity.compact,  // Makes the button more compact
  child: Text("Visual Density Button"),
);

12. focusColor

Type: Color?
Description: The color of the button when it is focused. This is useful for providing visual feedback that the button has been focused (e.g., for keyboard navigation or accessibility).

dartCopy codeElevatedButton(
  onPressed: () {},
  focusColor: Colors.green, // Changes the color when the button is focused
  child: Text("Focus Color Button"),
);

13. hoverColor

Type: Color?
Description: The color of the button when it is hovered over by a pointer (web/desktop). This is useful for providing visual feedback that the button is interactable when hovered.

dartCopy codeElevatedButton(
  onPressed: () {},
  hoverColor: Colors.blueAccent, // Changes color on hover
  child: Text("Hover Color Button"),
);

14. disabledElevation

Type: double?
Description: The elevation applied to the button when it is disabled. When a button is disabled, it is typically rendered without a shadow, but you can still control its appearance by adjusting the elevation.

dartCopy codeElevatedButton(
  onPressed: null,  // Disables the button
  disabledElevation: 2,  // Set a small shadow even when disabled
  child: Text("Disabled Elevation Button"),
);

15. disabledMouseCursor

Type: MouseCursor?
Description: Customizes the cursor appearance when the button is disabled. If the button is disabled, it changes the mouse cursor to reflect the inactive state.

dartCopy codeElevatedButton(
  onPressed: null,  // Disables the button
  disabledMouseCursor: SystemMouseCursors.forbidden, // Shows "forbidden" cursor
  child: Text("Disabled Mouse Cursor Button"),
);

Example of `ElevatedButton` with Multiple Properties

Here's an example that uses several properties together to create a highly customized ElevatedButton:

dartCopy codeElevatedButton(
  onPressed: () {
    print("Button Pressed!");
  },
  onLongPress: () {
    print("Long Pressed!");
  },
  autofocus: true,
  focusColor: Colors.red,  // When focused, show red color
  hoverColor: Colors.yellow,  // When hovered, show yellow color
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,    // Background color
    onPrimary: Colors.white, // Text color
    padding: EdgeInsets.all(16), // Padding
    elevation: 10, // Elevation for shadow
    disabledElevation: 0,  // No shadow when disabled
  ),
  clipBehavior: Clip.antiAlias,
  child: Text("Custom Elevated Button"),
);

Conclusion

The ElevatedButton widget in Flutter offers a wealth of customizable properties to help you create buttons that fit the design and behavior of your app. From controlling how the button looks with style to customizing focus and hover states, you can tailor the button to meet specific needs. By understanding these properties, you can make your buttons not only functional but also highly interactive and visually appealing.

Feel free to experiment with these properties and create buttons that fit the aesthetic and functional needs of your app. The ElevatedButton is a core part of Flutter’s material design library, making it an essential tool for building engaging UIs.

Happy coding! 🎉