Rounded button with Icon flutter - flutter

Question

how to change this square text button to a circular button with a plus icon as the image shows. here's my designed button code. and left side image showing the button I designed so far. I want It to be styled as Right side image.
Padding(
padding: const EdgeInsets.fromLTRB(300, 150, 0, 0),
child: SizedBox(
height: 50,
child: TextButton(
style: TextButton.styleFrom( backgroundColor: Color(0xffCAEC93) ,
side: BorderSide(color: Color(0xffCAEC93),
),
),
onPressed: () {
Icon(
Icons.favorite,
size: 20,
color: Colors.grey,
);
},
child: Text('M',style: TextStyle(fontFamily: 'Sen',color:Color(0xffFFFFFF)),),
),
),
),

Answer 1

You should be using FloatingActionButton instead, however if you still want to use Button then make use of the below code:
ElevatedButton(
onPressed: (){},
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
primary: Colors.lightGreen,
fixedSize: const Size(60,60)
),
child: const Icon(Icons.add_circle_outline))
Result:

Answer 2

You can use Floating action button for that : https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

Answer 3

I recommend to use FloatingActionButton instead of TextButton:
FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
),
your code should be like:
Padding(
padding: const EdgeInsets.fromLTRB(300, 150, 0, 0),
child: SizedBox(
height: 50,
child: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
),
),
),

Answer 4

You can use a FloatingActionButton
Like so:
FloatingActionButton(
child: Icon(Icons.add_circle_outline),
backgroundColor: Color(0xffCAEC93),
onPressed: (){
//do something
}
)

Answer 5

Use Container and give border radius to container and wrap conatiner widget with InkWell.
Center(
child: InkWell(
onTap: (){
print("Clicked");
},
child: Container(
alignment: Alignment.center,
height: 106,
width: 106,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(80)),
),
child: Image.asset("assets/edit.png",scale: 8,)
),
),
),
Image Output:

Answer 6

My approach with text added
Center(
child: InkWell(
onTap: () {},
child: Row(children: [
Container(
alignment: Alignment.center,
height: 40,
width: 40,
decoration: BoxDecoration(
color: Color(0xFFfd9770),
borderRadius: BorderRadius.all(Radius.circular(80)),
),
child: Icon(
Icons.edit,
color: Colors.white,
size: 20,
),
),
SizedBox(
width: 10,
),
Text('edit'.tr)
]))),

Answer 7

Try this it will work fortextButton
SizedBox(
height: 50,
width: 50,
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Color(0xffCAEC93),
side: BorderSide(
color: Color(0xffCAEC93),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
side: BorderSide(color: Colors.red)),
),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
)),
),
Or you can try FloatingActionButton