The Raised Button in flutter by default comes with a Argument or Prop named as color. The color argument is used to Set Change Raised Button Background Color in Flutter iOS Android mobile app. Color can support all the useful formats like Hex color code, ARGB, RGBA and also color constants. We can pass here any color and our Raised button will generated that particular background color.
Contents in this project Set Change Raised Button Background Color in Flutter iOS Android App Example :
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp().
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State Less Widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a function named as tmpFunction() in our MyApp class. In this function we would simply print a message using dart print() function on Command Prompt or Terminal screen. We would call this function on button OnPress event.
|
1 2 3 4 5 |
tmpFunction(){ print('Function on Click Event Called.'); // Put your code here, which you want to execute on onPress event. } |
5. Create Widget build area then create Scaffold widget -> Center widget -> Column widget. We would put all our 3 buttons in Column widget.
|
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 |
class MyApp extends StatelessWidget { tmpFunction(){ print('Function on Click Event Called.'); // Put your code here, which you want to execute on onPress event. } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ ], ) ) ) ); } } |
5. Create 3 Raised Button Widgets in Column widget.
- Color : Used to define Background color of Raised button widget. We are using Hex color code here.
Color code = 0xff + HEX Color code
|
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 |
RaisedButton( child: Text(" Button 1 "), onPressed: tmpFunction, color: Color(0xffFF1744), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Button 2 "), onPressed: tmpFunction, color: Color(0xff0091EA), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Button 3 "), onPressed: tmpFunction, color: Color(0xff1B5E20), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), |
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { tmpFunction(){ print('Function on Click Event Called.'); // Put your code here, which you want to execute on onPress event. } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ RaisedButton( child: Text(" Button 1 "), onPressed: tmpFunction, color: Color(0xffFF1744), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Button 2 "), onPressed: tmpFunction, color: Color(0xff0091EA), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Button 3 "), onPressed: tmpFunction, color: Color(0xff1B5E20), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], ) ) ) ); } } |
Screenshots:
