ElevatedButton Widget

ElevatedButton is a material design raised button that has a filled background color and a slightly elevated appearance. It’s a type of button that is commonly used in mobile app interfaces for the primary action.

The constructor of the ElevatedButton widget takes in several required and optional parameters. The required parameters are child and onPressed, which define the button’s label and the function that should be executed when the button is pressed, respectively. The optional parameters include style, onLongPress, autofocus, clipBehavior, focusNode, and more.

Here’s an example of an ElevatedButton widget that includes all the optional parameters:

ElevatedButton(
  onPressed: () {
    // Action to perform when button is pressed
  },
  onLongPress: () {
    // Action to perform when button is long-pressed
  },
  autofocus: true,
  clipBehavior: Clip.none,
  focusNode: FocusNode(),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
    textStyle: MaterialStateProperty.all<TextStyle>(
      TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
      ),
    ),
    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
      EdgeInsets.symmetric(
        vertical: 15.0,
        horizontal: 30.0,
      ),
    ),
    shape: MaterialStateProperty.all<OutlinedBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
    ),
    elevation: MaterialStateProperty.all<double>(10.0),
    shadowColor: MaterialStateProperty.all<Color>(Colors.grey),
  ),
  child: Text('Submit'),
);

In this example, the ElevatedButton widget has an ‘autofocus’ property set to true, which means that the button will be focused when the widget is displayed on the screen. The ‘clipBehavior’ property is set to ‘Clip.none’, which means that the widget’s child (the ‘Text’ widget) will not be clipped if it overflows the button’s bounds. The ‘style’ property is used to customize the button’s appearance, including the background color, foreground color, text style, padding, shape, elevation, and shadow color.

The ElevatedButton widget was introduced in Flutter version 2.0 as a replacement for the RaisedButton widget. It has a slightly different design and uses the Material Design guidelines to provide a consistent user experience across different platforms.

One important thing to note is that the ElevatedButton widget requires at least version 2.0 of the Flutter framework to work. If you are using an older version, you will need to stick with the RaisedButton widget or update your Flutter version. Additionally, the ElevatedButton widget has several optional parameters that can be used to customize its appearance and behavior, such as the style, onPressed function, and child widget.