flutter create a button with 2 icons - flutter

Question

[
I can create a button with an icon using this code
ElevatedButton.icon(
icon: Icon(
Icons.home,
color: Colors.green,
size: 30.0,
),
label: Text('Elevated Button'),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
)
but how to put an arrow on the right side of the button?

Answer 1

As per your shared Image I have try same design in Various ways choice is yours 😊which way you want to try.
Using ElevatedButton.icon
ElevatedButton.icon(
icon: const Icon(
Icons.mail,
color: Colors.green,
size: 30.0,
),
label: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Change Email Address'),
Icon(Icons.arrow_forward_ios)
],
),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(color: Colors.black),
),
fixedSize: const Size(double.infinity, 40),
),
),
Result Using ElevatedButton.icon ->
Using OutlinedButton.icon
OutlinedButton.icon(
icon: const Icon(
Icons.mail,
color: Colors.green,
size: 30.0,
),
label: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
'Change Email Address',
style: TextStyle(
color: Colors.black,
),
),
Icon(
Icons.arrow_forward_ios,
color: Colors.grey,
)
],
),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
side: const BorderSide(color: Colors.black,),
fixedSize: const Size(double.infinity, 40),
),
),
Result Using OutlinedButton.icon ->
Using ListTile
ListTile(
onTap: () {
print('Button Pressed');
},
visualDensity: const VisualDensity(horizontal: -4,vertical: -4),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(color: Colors.black),
),
leading: const Icon(Icons.mail,color: Colors.green),
trailing: const Icon(Icons.arrow_forward_ios),
title: const Text('Change Email Address'),
),
Result Using ListTile ->
Using GestureDetector
GestureDetector(
onTap: () {
print('Button Pressed');
},
child: Container(
padding:const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
borderRadius: BorderRadius.circular(10),),
child: Row(
children: const [
Icon(Icons.mail, color: Colors.green),
SizedBox(width: 10,),
Text('Change Email Address'),
Spacer(),
Icon(Icons.arrow_forward_ios),
],
),
),
),
Result Using GestureDetector ->
Using InkWell
InkWell(
onTap: () {
print('Button Pressed');
},
child: Container(
padding:const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
borderRadius: BorderRadius.circular(10),),
child: Row(
children: const [
Icon(Icons.mail, color: Colors.green),
SizedBox(width: 10,),
Text('Change Email Address'),
Spacer(),
Icon(Icons.arrow_forward_ios),
],
),
),
),
Result Using InkWell->

Answer 2

It seems like you want a ListTile widget, as it has leading/trailing properties:
Container(
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
),
child: const ListTile(
leading: Icon(Icons.mail),
trailing: Icon(Icons.arrow_forward_ios),
title: Text('Change Email Address'),
),
)
You can also use IconButton instead of a regular Icon in this example.

Answer 3

To add two icons to an elevated button, just wrap your child widget with a row widget. See implementation below:
ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Icon(Icons.home),
Text('Home'),
Icon(Icons.navigate_next)
],
),
),