Raised button has a sub widget called as RaisedButton.icon() which is used to create raised button with Icon images. Using RaisedButton.icon() widget can easily put icon at the left side of button. But to set icon at right side of raised button we have to modify the raised button structure and create custom raised button with Row widget. We are using the default Icon library of flutter in our tutorial because it covers all the icons. So in this tutorial we would Flutter Add Image Icon Inside Rounded Raised Button Android iOS Example Tutorial. In many apps we have seen button with different icons like Signing buttons, Which has a icon placed on the left side side of button to differentiate the purpose of button in single look.
Contents in this project Flutter Add Image Icon Inside Rounded Raised Button Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
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 MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating Widget build area in MyApp class. Now we would make our main Scaffold widget -> Center widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.white, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ ],) ) ) ); } |
5. Creating RaisedButton.icon() widget in Column widget.
- onPressed : Used to set on item click event on Button.
- shape : Used to make the circular corners around button.
- label : Used to create Button Title Text.
- icon : Used to put icon inside button at the left side of text.
- textColor : To set Text color.
- color : Used to set Background color of Raised Button.
|
1 2 3 4 5 6 7 8 9 10 |
RaisedButton.icon( onPressed: (){ print('Button Clicked.'); }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0))), label: Text('Button With Left Icon', style: TextStyle(color: Colors.white),), icon: Icon(Icons.android, color:Colors.white,), textColor: Colors.white, splashColor: Colors.red, color: Colors.green,), |
Button Screenshot:
6. Creating another RaisedButton.icon() widget in Column widget.
|
1 2 3 4 5 6 7 8 9 10 |
RaisedButton.icon( onPressed: (){ print('Button Clicked.'); }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0))), label: Text('Button With Left Icon', style: TextStyle(color: Colors.white),), icon: Icon(Icons.camera_alt, color:Colors.white,), textColor: Colors.white, splashColor: Colors.red, color: Colors.lightBlue,), |
Button Screenshot:
7. Creating a Container Widget -> Raised Button widget. We would put a Row widget as child of Raised button than put Text widget and Icon widget wrap in Padding widget to put image icon at the right side of 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 |
Container( width: 210, child: RaisedButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0))), onPressed: (){ print('Button Clicked.'); }, textColor: Colors.white, color: Colors.pink, padding: EdgeInsets.fromLTRB(5, 0, 5, 0), child: Padding( padding: EdgeInsets.fromLTRB(0,0,0,0), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( color: Colors.pink, padding: EdgeInsets.fromLTRB(10, 4, 4, 4), child: Text('Button With Right Icon', style: TextStyle(color: Colors.white),), ), Padding( padding: EdgeInsets.fromLTRB(4, 0, 10, 0), child: Icon( Icons.backup, color:Colors.white, size: 30, ), ), ], )))) |
Button Screenshot:
8. 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 73 74 75 76 77 78 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.white, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ RaisedButton.icon( onPressed: (){ print('Button Clicked.'); }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0))), label: Text('Button With Left Icon', style: TextStyle(color: Colors.white),), icon: Icon(Icons.android, color:Colors.white,), textColor: Colors.white, splashColor: Colors.red, color: Colors.green,), RaisedButton.icon( onPressed: (){ print('Button Clicked.'); }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0))), label: Text('Button With Left Icon', style: TextStyle(color: Colors.white),), icon: Icon(Icons.camera_alt, color:Colors.white,), textColor: Colors.white, splashColor: Colors.red, color: Colors.lightBlue,), Container( width: 210, child: RaisedButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0))), onPressed: (){ print('Button Clicked.'); }, textColor: Colors.white, color: Colors.pink, padding: EdgeInsets.fromLTRB(5, 0, 5, 0), child: Padding( padding: EdgeInsets.fromLTRB(0,0,0,0), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( color: Colors.pink, padding: EdgeInsets.fromLTRB(10, 4, 4, 4), child: Text('Button With Right Icon', style: TextStyle(color: Colors.white),), ), Padding( padding: EdgeInsets.fromLTRB(4, 0, 10, 0), child: Icon( Icons.backup, color:Colors.white, size: 30, ), ), ], )))) ],) ) ) ); } } |
Screenshot:
