How to create an OutlinedButton in Flutter

Key takeaways:

  1. Flutter is a versatile toolkit for building cross-platform applications using a single codebase, making it an attractive option for developers focused on creating responsive user interfaces.

  2. An outlined button in Flutter features a border with a transparent background, primarily used for secondary actions, offering a visually distinct yet subtle means for user interaction.

  3. The OutlinedButton widget, part of the Flutter material library, simplifies the creation of outlined buttons.

  4. The implementation steps of OutlinedButton in Flutter are as follows:

    1. Begin by setting up a new Flutter project.

    2. Incorporate the OutlinedButton within the main application, configuring properties such as border color, width, and shape, along with an onPressed callback to handle button presses.

    3. Customize the button’s appearance by setting attributes like border width and color, and using a Text widget for labeling.

Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one Codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms.

What is an outlined button?

An outlined button in Flutter displays a border around its parameter, typically with a transparent background and text inside the border where the border gives the appearance of the button. These buttons are commonly used for secondary actions in the application interface where their appearance is less prominent than solid filled buttons but still provides affordance for interaction.

The OutlinedButton widget

Outlined buttons in Flutter are typically created using the OutlinedButton widget, which is a part of the Flutter material library. The OutlinedButton is essentially a TextButton with an outlined border.

Creating a OutlinedButton

Follow the steps mentioned below to create a segmented button in the Flutter application:

1- Create a Flutter project

Let’s start by creating a new Flutter project. For this, open the terminal and execute the following commands:

flutter create outlinedbutton
cd outlinedbutton

2- Create the user interface

Let’s create a simple OutlinedButton inside the MyApp class in the main.dart file. We will give it a border of width: 2.0 and blue color. We'll also give it a shape of RoundedRectangularBorder. We also have a onPressed parameter, which will contain the code executed whenever the button is pressed. Here, we are just printing “Outlined Button pressed” whenever the button is pressed. Here is the code:

OutlinedButton(
    onPressed: () {
        // Add your onPressed action here
        print('Outlined Button pressed');
    },
    style: OutlinedButton.styleFrom(
        side: const BorderSide(width: 2.0, color: Colors.blue),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0)),
    ),
    child: const Text(
        'Outlined Button',
        style: TextStyle(
        fontSize: 16.0,
        color: Colors.blue,
        ),
    ),
)

3- Complete implementation

Following is the complete code of the Flutter application with the implementation of a OutlinedButton:

IyBUaGlzIGZpbGUgY29uZmlndXJlcyB0aGUgYW5hbHl6ZXIsIHdoaWNoIHN0YXRpY2FsbHkgYW5hbHl6ZXMgRGFydCBjb2RlIHRvCiMgY2hlY2sgZm9yIGVycm9ycywgd2FybmluZ3MsIGFuZCBsaW50cy4KIwojIFRoZSBpc3N1ZXMgaWRlbnRpZmllZCBieSB0aGUgYW5hbHl6ZXIgYXJlIHN1cmZhY2VkIGluIHRoZSBVSSBvZiBEYXJ0LWVuYWJsZWQKIyBJREVzIChodHRwczovL2RhcnQuZGV2L3Rvb2xzI2lkZXMtYW5kLWVkaXRvcnMpLiBUaGUgYW5hbHl6ZXIgY2FuIGFsc28gYmUKIyBpbnZva2VkIGZyb20gdGhlIGNvbW1hbmQgbGluZSBieSBydW5uaW5nIGBmbHV0dGVyIGFuYWx5emVgLgoKIyBUaGUgZm9sbG93aW5nIGxpbmUgYWN0aXZhdGVzIGEgc2V0IG9mIHJlY29tbWVuZGVkIGxpbnRzIGZvciBGbHV0dGVyIGFwcHMsCiMgcGFja2FnZXMsIGFuZCBwbHVnaW5zIGRlc2lnbmVkIHRvIGVuY291cmFnZSBnb29kIGNvZGluZyBwcmFjdGljZXMuCmluY2x1ZGU6IHBhY2thZ2U6Zmx1dHRlcl9saW50cy9mbHV0dGVyLnlhbWwKCmxpbnRlcjoKICAjIFRoZSBsaW50IHJ1bGVzIGFwcGxpZWQgdG8gdGhpcyBwcm9qZWN0IGNhbiBiZSBjdXN0b21pemVkIGluIHRoZQogICMgc2VjdGlvbiBiZWxvdyB0byBkaXNhYmxlIHJ1bGVzIGZyb20gdGhlIGBwYWNrYWdlOmZsdXR0ZXJfbGludHMvZmx1dHRlci55YW1sYAogICMgaW5jbHVkZWQgYWJvdmUgb3IgdG8gZW5hYmxlIGFkZGl0aW9uYWwgcnVsZXMuIEEgbGlzdCBvZiBhbGwgYXZhaWxhYmxlIGxpbnRzCiAgIyBhbmQgdGhlaXIgZG9jdW1lbnRhdGlvbiBpcyBwdWJsaXNoZWQgYXQKICAjIGh0dHBzOi8vZGFydC1sYW5nLmdpdGh1Yi5pby9saW50ZXIvbGludHMvaW5kZXguaHRtbC4KICAjCiAgIyBJbnN0ZWFkIG9mIGRpc2FibGluZyBhIGxpbnQgcnVsZSBmb3IgdGhlIGVudGlyZSBwcm9qZWN0IGluIHRoZQogICMgc2VjdGlvbiBiZWxvdywgaXQgY2FuIGFsc28gYmUgc3VwcHJlc3NlZCBmb3IgYSBzaW5nbGUgbGluZSBvZiBjb2RlCiAgIyBvciBhIHNwZWNpZmljIGRhcnQgZmlsZSBieSB1c2luZyB0aGUgYC8vIGlnbm9yZTogbmFtZV9vZl9saW50YCBhbmQKICAjIGAvLyBpZ25vcmVfZm9yX2ZpbGU6IG5hbWVfb2ZfbGludGAgc3ludGF4IG9uIHRoZSBsaW5lIG9yIGluIHRoZSBmaWxlCiAgIyBwcm9kdWNpbmcgdGhlIGxpbnQuCiAgcnVsZXM6CiAgICAjIGF2b2lkX3ByaW50OiBmYWxzZSAgIyBVbmNvbW1lbnQgdG8gZGlzYWJsZSB0aGUgYGF2b2lkX3ByaW50YCBydWxlCiAgICAjIHByZWZlcl9zaW5nbGVfcXVvdGVzOiB0cnVlICAjIFVuY29tbWVudCB0byBlbmFibGUgdGhlIGBwcmVmZXJfc2luZ2xlX3F1b3Rlc2AgcnVsZQoKIyBBZGRpdGlvbmFsIGluZm9ybWF0aW9uIGFib3V0IHRoaXMgZmlsZSBjYW4gYmUgZm91bmQgYXQKIyBodHRwczovL2RhcnQuZGV2L2d1aWRlcy9sYW5ndWFnZS9hbmFseXNpcy1vcHRpb25zCg==
Implementation of the outline button feature

Note: You can find your application running at the given link once you run the code widget above.

Code explanation

  • Lines 16–20: We have created an OutlinedButton which, when pressed, calls the onPressed callback function. This will print “Outlined Button pressed” to the console.

  • Lines 21–25: We are styling our OutlinedButton which configures the appearance of the button. Here, it sets a blue border with a width of 2.0 and a rounded rectangular shape.

  • Lines 26–32: Here, we have created a Text widget in child with the text “Outlined Button” in a blue color.

Conclusion

Creating an OutlinedButton in Flutter is a simple yet effective way to enhance user interaction in mobile and web applications. By leveraging the built-in OutlinedButton widget, developers can easily incorporate secondary action buttons that are visually appealing and functional.

We offer various courses if you aim to continue your journey in learning Flutter!

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is Flutter Checkbox widget?

A checkbox is a material design widget that allows users to select one or more options from a list. It is a simple but effective way for users to interact with your app and provide feedback by tapping a small square box.

What is SegmentedButton in Flutter?

A SegmentedButton is a material button that allows the user to select from a limited set of options. Segmented buttons assist with selecting choices, switching options, or sorting elements. They are typically utilized in situations where there are just 2–5 options.

Can we create an extended floating action button in Flutter?

Yes, we can create an extended floating action button in Flutter. In Flutter, the FloatingActionButton.extended constructor allows us to build another button, which is derived from the base material of the floating action button.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved