Example of ElevatedButton Widget in Flutter in Android iOS App

Hello friends, As we all know the most usable Button widget in flutter known as Raised Button is deprecated. As per its replacement there is another widget named as ElevatedButton which has even more flexible editing options. So in today’s tutorial we would learn about Example of ElevatedButton Widget in Flutter in Android iOS. We would create a simple ElevatedButton with its simples properties, So you’ll know how its work and how to get full control of ElevatedButton in flutter. So let’s get started 🙂 .

Contents in this project Example of ElevatedButton Widget in Flutter in Android iOS:-

1. The first step is to open your project’s main.dart file and import material.dart package in your file.

2. Creating our void main runApp() method and here we would call our main MyApp class.

3. Creating our main class MyApp extends StatelessWidget. This is our main parent class.

4. Creating a function named as sampleFunction(). We would call this function on ElevatedButton onPress event. We are simply printing a message on Terminal screen in this message.

5. Creating Widget Build Area -> Material App -> Scaffold Widget -> Center Widget -> Container Widget.

6. Creating ElevatedButton widget as Child of Container widget.

1. style : Used to set Styling options of ElevatedButton.

2. primary : To set background color of ElevatedButton.

3. padding : Apply padding on ElevatedButton inside Text.

4. child : To display Child Text within ElevatedButton.

5. onPressed : To call a function on Button onPress, onClick event.

7. Complete source code for main.dart file:-

Screenshots:-

Example of ElevatedButton Widget in Flutter in Android iOS App

Leave a Reply

Your email address will not be published.