K-Learn

Flutter ElevatedButton Widget

Posted on Wednesday, 15 March 2023 04:06 PM

ElevatedButton is a pre-built button widget in Flutter that provides a raised appearance and responds to user input. 

Here's an example of how you might use it in your code:

ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  child: Text('Click me!'),
)

In this example,

The ElevatedButton widget is used to create a button with the label "Click me!" that, when pressed, will execute some code that you define in the onPressed callback.

Some of the properties you can customize when using an ElevatedButton:

onPressed:This property takes a callback function that will be executed when the button is pressed. You can use this to trigger some action in your app, such as navigating to a new screen, submitting a form, or performing some other operation.

child:This property defines the content of the button. You can use any Flutter widget here, such as Text, Icon, Image, or even a custom widget you create yourself.

style:This property lets you customize the appearance of the button. You can set things like the background color, text color, elevation (the height of the button's shadow), and more.

For example,

ElevatedButton(
  onPressed: () {
    // Do something when the button is pressed
  },
  child: Text('Click me!'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    textStyle: TextStyle(color: Colors.white),
    elevation: 8,
  ),
)

In this example,

The button's background color is set to blue, the text color is set to white, and the elevation is set to 8.