What is outlined button in flutter?

The outlined button in flutter is basically a material design widget. Actually it’s a TextButton with an outlined border.

We’ve an exhaustive tutorial on text button with reference to its style, border, color, and elevation. Moreover, we’ve discussed elevated button in our previous tutorial also.

Therefore, you if you had read those articles already, you’d find this tutorial on outlined button rather familiar.

For an example, we’ve displayed three outlined buttons in a column widget. So that we can distinguish each with the other.

Let’s first take a look at the first two outlined buttons first.

Subsequently, let’s take a look at the first outlined button’s code.

OutlinedButton(
            onPressed: () {},
            child: const Text(
              'Click Me',
              style: TextStyle(
                fontSize: 30,
                color: Colors.red,
              ),
            ),
          ),

In fact, nothing fancy is there. If you’re familiar with the text button, then you’ll find this code quite similar.

And the second outlined button uses color gradient to make its presence felt. And, indeed, it’s successful in its attempt.

As a result, the code is quite lengthy.

ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Stack(
              children: <Widget>[
                Positioned.fill(
                  child: Container(
                    padding: const EdgeInsets.all(15),
                    alignment: Alignment.center,
                    width: 350.00,
                    height: 350.00,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      border: Border.all(
                        color: Colors.red,
                        width: 2.0,
                        style: BorderStyle.solid,
                      ),
                      borderRadius:
                          const BorderRadius.all(Radius.circular(40.0)),
                      gradient: const LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                          Colors.blue,
                          Colors.red,
                        ],
                      ),
                    ),
                  ),
                ),
                OutlinedButton(
                  onPressed: () {},
                  child: const Text(
                    'Click Me',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),

We’ve used two other layout widgets like ClipRRect and Card so that we can decorate our outlined button.

However, in less code, we can decorate our outlined button quite easily.

To do that, we need to use the static styleFrom method.

OutlinedButton(
            style: OutlinedButton.styleFrom(
              primary: Colors.white,
              backgroundColor: Colors.red,
              side: BorderSide(
                color: const Color(4278190000),
              ),
              elevation: 40.0,
            ),
            onPressed: () {},
            child: Text(
              'Press OutlineButton',
              style: TextStyle(
                fontFamily: 'Allison',
                fontSize: 50,
              ),
            ),
          ),

As a result, we can distinguish an outlined button quite easily. For full code, please visit the respective GitHub repository.

The third outlined button is now quite distinguishable.

Now we need to remember a few things while we use an outlined button.

Firstly, the OutlinedButton widget passes two required parameters that we must know. One is child, and the other is onPressed.

Secondly, defaultStyleOf defines the default style of any outlined button.

And finally, the TextButton or ElevatedButton doesn’t have a default ButtonStyle.side static method. It actually borders the outline.

Keeping these simple rules in mind will help us to deal with the outlined button in a better way.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter