Flutter: Adding a Border to an Elevated Button

Updated: August 18, 2022 By: Snowball Post a comment

In Flutter, you can add a border (and customize its thickness and color as well) to an elevated button by using the ElevatedButton.styleFrom() static method like this:

ElevatedButton(
     style: ElevatedButton.styleFrom(
            side: const BorderSide(
                width: 2, // the thickness
                color: Colors.black // the color of the border
            )
     ),     
     /* ... */
),

In case you need to create a rounded border, use this implementation:

ElevatedButton(
       style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                      side: const BorderSide(
                              width: 8, // thickness
                              color: Colors.deepPurple // color
                      ),
                      // border radius
                      borderRadius: BorderRadius.circular(16) 
              )
        ),
        /* ... */
),

Let’s examine the concrete example below for more clearness.

Screenshot:

The code:

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Button One (a rectangular button)
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  side: const BorderSide(width: 2, color: Colors.black),
                  primary: Colors.amber,
                  padding:
                      const EdgeInsets.symmetric(vertical: 10, horizontal: 30)),
              child: const Text(
                'Button One',
                style: TextStyle(color: Colors.black, fontSize: 20),
              ),
            ),
            const SizedBox(
              height: 30,
            ),

            // Button Two (a pill button)
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  side: const BorderSide(width: 5, color: Colors.red),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30)),
                  primary: Colors.black,
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 50)),
              child: const Text(
                'Button Two',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),
            const SizedBox(
              height: 30,
            ),

            // Button Three (a rounded button)
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      side:
                          const BorderSide(width: 8, color: Colors.deepPurple),
                      borderRadius: BorderRadius.circular(16)),
                  primary: Colors.orangeAccent,
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 80)),
              child: const Text(
                'Button Three',
                style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.deepPurple),
              ),
            ),
          ],
),

Further reading:

You can also tour around our Flutter topic page or Dart topic page for the most recent tutorials and examples.