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:

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:

3- Complete implementation

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

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.