Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: How to create round/circular button

I am not able to any sample for creating a circular button like FloatingActionButton? Is there any way to create it?

Below code creates a rectangular button, is there any for Circular Button?

shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
like image 377
Jitesh Mohite Avatar asked Aug 19 '19 18:08

Jitesh Mohite


Video Answer


3 Answers

You can use the MaterialButton widget.
It's shape field can be set to CircleBorder value and that will give you a circular button.

For example, I've modified the code of one of my projects views where I have rounded rectangle buttons to make one of them circular:

Container(
  width: 80,
  height: 80,
  child: MaterialButton(
    shape: CircleBorder(
              side: BorderSide(
                width: 2,
                color: Colors.red,
                style: BorderStyle.solid,
              ),
    ),
    child: Text("Login"),
    color: Colors.teal,
    textColor: Colors.amber,
    onPressed: (){},
  ),
),

Screenshot:
enter image description here

like image 94
Alexander Arendar Avatar answered Nov 15 '22 09:11

Alexander Arendar


Container(
                      width: 90,
                      height: 90,
                      child: RaisedButton(onPressed: (){
                      },
                        color: Colors.deepOrange,  
                        textColor: Colors.white,
                        shape: CircleBorder(side: BorderSide.none),
                        child: Text('Login',style: TextStyle(
                            fontSize: 20.0
                        ),
                        ),
                      ),
                    )
like image 33
Shagun Jain Avatar answered Nov 15 '22 09:11

Shagun Jain


We can create a circular button by FloatingActionButton widget.

 return Container(
      alignment: Alignment.center,
        child: new SizedBox(
      child: FloatingActionButton(
          backgroundColor: Colors.red,
          child: null,
          onPressed: () {
            print("Cliked");
          },)
    ));
  }

Output:

enter image description here

like image 24
Jitesh Mohite Avatar answered Nov 15 '22 09:11

Jitesh Mohite