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.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main class MyApp extends StatelessWidget. This is our main parent class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
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.
|
1 2 3 |
void sampleFunction() { print('Function Called...'); } |
5. Creating Widget Build Area -> Material App -> Scaffold Widget -> Center Widget -> Container Widget.
|
1 2 3 4 5 6 7 8 9 10 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 10), child: ))); } |
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.
|
1 2 3 4 5 6 7 8 9 |
ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 24), ), child: Text('Elevated Button Example'), onPressed: sampleFunction, ), |
7. Complete source code for main.dart file:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { void sampleFunction() { print('Function Called...'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 24), ), child: Text('Elevated Button Example'), onPressed: sampleFunction, ), ), ))); } } |
Screenshots:-
