Rounded button with Icon flutter-CodePudding

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

CodePudding user response：

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

CodePudding user response：

You should be using FloatingActionButton instead, however if you still want to use Buttons then make use of the below code:

ElevatedButton(
  onPressed: (){},
  style: ElevatedButton.styleFrom(
  shape: const CircleBorder(),
  primary: Colors.lightGreen,
  minimumSize: const Size(60,60)
         ),
  child: const Icon(Icons.add_circle_outline))

Result:

CodePudding user response：

You can use a FloatingActionButton

Like so:

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

CodePudding user response：

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

CodePudding user response：

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