As we all know Elevated button is replacing Raised Button widget with its new features. When we start learning about Elevated button then the first thing comes in our mind is how to change Elevated Button background color in Flutter. So in Elevated Button we would use its own Styling property primary to set background color of Elevated Button in both Android & iOS application. So in this tutorial we would learn about Example Set Change Elevated Button Background Color in Flutter iOS Android.
Contents in this project Example Set Change Elevated Button Background Color in Flutter iOS Android :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating 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 Class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating a function named as tmpFunction(). We would call this function on button onclick event.
|
1 2 3 |
void tmpFunction() { print('Function Called...'); } |
5. Creating Widget Build Area -> Material App -> Scaffold Widget -> Center Widget -> Column Widget. Here we would make 4 Elevated Button wrapped inside Container Widget.
- primary :- We would use the Primary Style to change the Background Color of Elevated Button.
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.purple, padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With Color Constant', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Color(0xFFAEEA00), padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With HEX Color', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Color.fromARGB(255, 255, 128, 0), padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With ARGB Color', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Color.fromRGBO(0, 155, 0, 1.0), padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With RGBO Color', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), ])))); } |
6. 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { void tmpFunction() { print('Function Called...'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.purple, padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With Color Constant', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Color(0xFFAEEA00), padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With HEX Color', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Color.fromARGB(255, 255, 128, 0), padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With ARGB Color', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), Container( margin: const EdgeInsets.fromLTRB(20, 5, 20, 5), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Color.fromRGBO(0, 155, 0, 1.0), padding: EdgeInsets.all(10), textStyle: TextStyle(fontSize: 20), ), child: Text('Elevated Button With RGBO Color', textAlign: TextAlign.center), onPressed: tmpFunction, ), ), ])))); } } |
Screenshots:-
