OutlinedButton Widget

The OutlinedButton widget is a Material Design button that displays an outlined border on a background. It inherits properties from TextButton and can be customized with various parameters.

The constructor for OutlinedButton is as follows:

OutlinedButton({
  Key? key,
  required VoidCallback onPressed,
  ButtonStyle? style,
  FocusNode? focusNode,
  bool autofocus = false,
  Clip? clipBehavior,
  required Widget child,
})

• key: is an optional key for this widget.
• onPressed: is a required callback that is called when the button is pressed.
• style is an optional ButtonStyle to use for the button. If no style is provided, the default OutlinedButton.styleFrom is used.
• focusNode: is an optional FocusNode to use for this widget.
• autofocus: is an optional boolean indicating whether this widget should request focus when the widget is first inserted into the tree.
• clipBehavior: is an optional Clip to use for the widget.
• child: is a required child widget that will be the label of the button.

Here is an example of using OutlinedButton:

OutlinedButton(
  onPressed: () {
    // do something
  },
  style: OutlinedButton.styleFrom(
    side: BorderSide(width: 2, color: Colors.blue),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    padding: EdgeInsets.all(16),
  ),
  child: Text(
    'Press me',
    style: TextStyle(
      color: Colors.blue,
      fontSize: 20,
    ),
  ),
),

This creates an OutlinedButton with a blue border and rounded corners, and the text “Press me” in blue. The styleFrom method is used to customize the button’s appearance.

One important thing to note about the OutlinedButton widget is that it is designed to be used as a secondary button, rather than a primary action button. It has a lower visual weight than the ElevatedButton or RaisedButton widgets, making it suitable for use as a cancel or reset button, or as a less important action button.

The OutlinedButton widget also supports some additional optional parameters, such as the borderSide parameter which allows you to specify the border side style, and the shape parameter which allows you to specify a custom shape for the button. Additionally, the onPressed function can be set to null to disable the button.

OutlinedButton widget is not necessarily a replacement for other widgets, but rather an alternative design option for a button. It has a similar functionality to TextButton and ElevatedButton, but with a different visual style.

For example, if you want a button that has a visible border around it but is not as visually prominent as the ElevatedButton, you might consider using OutlinedButton. On the other hand, if you want a button with no borders and a flat visual style, you might use TextButton. Ultimately, the choice of which button widget to use depends on your specific design needs and preferences.