Rounded button with Icon 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)),),
                      ),
                    ),
                  ),

Does this answer your question? [How to create a circle icon button in Flutter?](https://stackoverflow.com/questions/49809351/how-to-create-a-circle-icon-button-in-flutter) — Pratik Butani, Jan 24 '22 at 08:51

Siddharth Mehra · Answer 1 · 2023-06-02T04:24:27.197

2

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:

edited Jun 02 '23 at 04:24

answered Jan 24 '22 at 09:01

Siddharth Mehra

1,691
1
9
32

score 0 · Answer 2 · answered Jan 24 '22 at 08:52

0

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

answered Jan 24 '22 at 08:52

Hardik Mehta

2,195
1
11
14

Josteve · Answer 3 · 2022-01-24T09:04:31.973

0

You can use a FloatingActionButton

Like so:

FloatingActionButton(
  child: Icon(Icons.add_circle_outline),
  backgroundColor: Color(0xffCAEC93),
  onPressed: (){
   //do something
  }
)

edited Jan 24 '22 at 09:04

answered Jan 24 '22 at 08:54

Josteve

11,459
1
23
35

score 0 · Answer 4 · answered Jan 24 '22 at 08:56

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),
                      ),
                    ),
                  ),

score 0 · Answer 5 · answered Jan 28 '22 at 12:18

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:

score 0 · Answer 6 · answered Sep 15 '22 at 13:53

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)
                            ]))),

score -1 · Accepted Answer · answered Jan 24 '22 at 09:00

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

Rounded button with Icon flutter

7 Answers7

Result: