Question 217642 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to give border radius for button?

How to add border radius for OutlinedButton and ElevatedButton with background color
![enter image description here

Tags:

2

Answers


  1. 0

    try below example :

    in ElevatedButton Example :

     ElevatedButton(
            onPressed: () {
              // Add your button click logic here
            },
            style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                borderRadius:
                    BorderRadius.circular(10.0), 
                side: BorderSide(
                    width: 2,
                    color: Colors.green),
              ),
              backgroundColor:
                  Colors.red, 
            ),
            child: Text('My Button'),
          ),

    In OutlineButton Example :

    OutlinedButton(
            onPressed: () {
             
            },
            style: OutlinedButton.styleFrom(
              backgroundColor: Colors.white,
              side: BorderSide(
                width: 2,
                color: Colors.blue,
              ),
              shape: RoundedRectangleBorder(
                borderRadius:
                    BorderRadius.circular(10.0), // Adjust the radius as needed
              ),
            ),
            child: Text('My Button'),
          ),
    Login or Signup to reply.
  2. 0

    Try below code I have write code on your provided images, some reference URL below

    OutlinedButton, ElevatedButton, Style Class

    Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    OutlinedButton(
      onPressed: () {},
      style: OutlinedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        side: const BorderSide(width: 1, color: Colors.green),
        fixedSize: const Size(200, 50), //Add width and height on your need
      ),
      child: const Text(
        'Clear',
        style: TextStyle(color: Colors.grey),
      ),
    ),
    const SizedBox(
      height: 10,
    ),
    ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        side: const BorderSide(width: 1, color: Colors.green),
        backgroundColor: Colors.green,
        fixedSize: const Size(200, 50), //Add width and height on your need
      ),
      child: const Text('Apply'),
    ),
  ],
),

    Result Screen-> enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search