A Deep Dive into Flutter OutlinedButton: Usage, Examples, and Tips

Ever stumbled upon a button so neatly defined that it simultaneously stands out and blends perfectly within the context of an app's interface?

Say hello to the Flutter OutlinedButton, a widget that strikes the perfect balance between prominence and subtlety. As a medium-emphasis button, it fulfills the role of a secondary action trigger, complementing your primary buttons without stealing the spotlight.

In the vibrant world of Flutter development, the OutlinedButton Flutter is like the harmony in a symphony—an essential player that contributes to the overall user experience. It reels in user attention with its defining border, only to gently point them towards an action without being overly assertive.

Creating a Simple Outlined Button Flutter

When you're building an interface in Flutter, you often need buttons. But not just any buttons—buttons that look good and serve your layout without overwhelming it. That's where the outlined buttons come in.

Now, let's jump right into creating a basic Flutter OutlinedButton. The simplicity of Flutter's syntax shines here, allowing you to get a button up and running with minimal code:

1ElevatedButton(
2  onPressed: () {
3    // Perform some action
4  },
5  style: ElevatedButton.styleFrom(
6    // Define button's look with styleFrom
7    primary: Colors.blue, // Set the background color
8    onPrimary: Colors.white, // Set the text (and icon) color
9    shape: RoundedRectangleBorder(
10      // The button's outline is defined as a rounded rectangle with circular corners
11      borderRadius: BorderRadius.circular(30.0),
12    ),
13  ),
14  child: const Text('Click Me'), // Button's label
15)

​

In this code snippet, you've defined the outlined button’s child as const Text, which will be displayed directly on the button. The text is simply "Click Me"—the archetypal call-to-action. The style parameter allows us to influence the look and feel of the button.

We've set the button's background color to blue and the text color to white, which are common choices for a light-themed app. To give the button rounded corners, we have used a RoundedRectangleBorder with a circular radius.

But what if you want your own style or theme?

That's the beauty of Flutter; you are not constrained by default values. You have complete control to override the parameters and customize the style as you need.

Here's a question: How would you make this a true outlined button if by default the ElevatedButton has a filled style?

Let's tweak our button to transform it into the outlined variant:

1OutlinedButton(
2  onPressed: () {
3    // Define the method to handle button press
4  },
5  style: OutlinedButton.styleFrom(
6    primary: Colors.blue, // Text and icon color
7    side: BorderSide(color: Colors.blue), // Border color
8  ),
9  child: const Text('Click Me'), // The button's label
10)

​

Even if you are a first-time Flutter developer, this code should be rather self-explanatory: it creates an outlined button, with the outline and text in blue, waiting for you to define what happens when it's pressed.

Exploring the Basics of OutlinedButton Flutter

Before diving into creating complex UI components, it's essential to comprehend the structure of an OutlinedButton Flutter widget. The basics are simple yet powerfully flexible, allowing developers to anchor their creative ideas in solid functionality.

An OutlinedButton is essentially a constituted part of Flutter's material design kit, configured to work flawlessly within the framework's widget tree. It embodies the principles of material design with its response to user input—exhibiting changes in color, elevation, and even shape upon interaction.

The fundamental structure of the OutlinedButton can be dissected as follows:

• The Child: This property is at the heart of the button—it's the content displayed inside the button, typically a Text widget.

• The onPressed Method: The beating heart of the button, this method defines what action will be taken when the user presses the button.

• The Style: Flutter's styling features allow you to define how your outlined button will be presented, including its shape, border thickness, and color.

• The Shape: Through the style’s ‘shape’ parameter, you can give your outlined button a specific look—an envelope for the button’s child.

• The Border: A key characteristic of an OutlinedButton is its border. By default, the button has a predefined border visible on the screen that can be adjusted with the style parameter.

Here's a breakdown of how an OutlinedButton is typically defined within Flutter's environment using Dart:

1OutlinedButton(
2  onPressed: () {
3    // Action to be taken when the button is pressed
4  },
5  style: ButtonStyle(
6    // Set different values for style properties
7    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
8      RoundedRectangleBorder(
9        borderRadius: BorderRadius.circular(18.0),
10        side: BorderSide(color: Colors.red)
11      ),
12    ),
13  ),
14  child: const Text(
15    'Sign Up',
16    style: TextStyle(fontSize: 18)
17  ),
18)

​

In this code, we've created an OutlinedButton widget with a simple text label. The onPressed parameter houses the function that would execute upon a tap. Meanwhile, the style parameter is where the magic happens—you can use a ButtonStyle object, providing a MaterialStateProperty that applies different values depending on the button's state. We've specified a red-bordered shape that corresponds to the Flutter outlined button's typical look and feel.

OutlinedButton widgets fit eloquently within the widget tree, just as any other Flutter widget would, harmoniously compatible with other UI elements. Whether nestled within a Column or Row or acting as a standalone element, the outlined button adheres to material design principles, offering a sense of depth when long pressed and satisfying visual feedback on interaction.

Its role within material design is clear: to present an alternative to the more heavyweight ElevatedButton or the minimalist TextButton. The Flutter OutlinedButton sits comfortably in between, providing visible containment without overt visual weight, making it an ideal candidate for secondary actions in your apps.

Customizing the Style Parameter of Flutter OutlinedButton

Styling in Flutter is akin to dressing up a character in a game; it's where you get to be creative and give your widgets a distinctive look. The style parameter of the Flutter OutlinedButton is your virtual wardrobe—chock-full of properties eager to be tailored to fit your app's personality.

Let’s see how we can transform the default look of an outlined button to something that screams uniqueness. Remember, the style parameter accepts a ButtonStyle object that encapsulates a suite of styling properties.

First things first, how about we give our button a distinct border color? Perhaps something that isn't just the default gray but instead a vibrant blue that pops. Here’s the code for our eye-catching creation:

1OutlinedButton(
2  onPressed: () {
3    // Your code here
4  },
5  style: ButtonStyle(
6    side: MaterialStateProperty.resolveWith<BorderSide>(
7      (Set<MaterialState> states) {
8        if (states.contains(MaterialState.pressed)) {
9          return BorderSide(
10            color: Colors.blue.shade700,
11            width: 2,
12          );
13        }
14        return BorderSide(color: Colors.blue);
15      },
16    ),
17  ),
18  child: const Text('Discover More'),
19)

​

In this snippet, we've created an outlined button whose border color intensifies when pressed, providing a delightful tactile cue to the user. The MaterialStateProperty.resolveWith method allows for different values to be used based on the button's state—such as when it's pressed.

But let's not stop at border color. What about the shape? Rounded corners can make your buttons feel friendlier—an ode to modern design trends. Let's see how this can be done:

1OutlinedButton(
2  onPressed: () {
3    // Replace with your function
4  },
5  style: ButtonStyle(
6    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
7      RoundedRectangleBorder(
8        borderRadius: BorderRadius.circular(30), // Intensifies the roundness
9      ),
10    ),
11  ),
12  child: const Text('Embrace Curves'),
13)

​

Observe how we've shaped our button to have a borderRadius of 30, giving it the ‘embrace curves’ look. Now, our button exhibits a gentle, rounded outline that would stand out in any app.

Of course, no button truly shines without a well-coordinated color scheme. Styling with colors is not just about beauty; it's about branding value, visual hierarchy, and user guidance:

1OutlinedButton(
2  onPressed: () {
3    // Invoke your desired functionality
4  },
5  style: ButtonStyle(
6    foregroundColor: MaterialStateProperty.resolveWith<Color>(
7      (Set<MaterialState> states) {
8        if (states.contains(MaterialState.hovered)) {
9          return Colors.green;
10        }
11        return null; // Use the component's default.
12      },
13    ),
14    overlayColor: MaterialStateProperty.all<Color>(Colors.white.withOpacity(0.2)), // Subtle pressed overlay
15  ),
16  child: const Text('Hover Over Me!'),
17)

​

Here, we crafted an outlined button that changes its text to green upon hover—a nifty feature particularly useful for web and desktop Flutter apps where cursor interactions are prevalent.

The overlayColor is a nice bonus. It introduces a subtle white ink effect when the button is pressed—it's all about the details!

What we’ve covered are just a few threads from the rich tapestry of the style parameter. Flutter’s OutlinedButton offers a playground of possibilities whether it's tweaking the textStyle, the elevation for shadows, or the backgroundColor. It brings to the table an abundance of additional properties just awaiting your creative touch.

Adding Icons to a Flutter Outline Button

In Flutter, the mighty OutlinedButton.icon constructor empowers you to effortlessly create a button that features both an icon and a label. This adds flavor to your button's design and can significantly improve user interaction, especially if you're aiming for an intuitive, self-explanatory UI.

Here’s how you brew this visual espresso shot:

1OutlinedButton.icon(
2  icon: Icon(Icons.explore, color: Colors.blue), // The leading icon of your button
3  label: Text('Explore Now'), // The text label following the icon
4  onPressed: () {
5    // Define your navigation or action
6  },
7  style: OutlinedButton.styleFrom(
8    side: BorderSide(width: 1, color: Colors.blue), // Define the outline's weight and color
9    shape: RoundedRectangleBorder(
10      borderRadius: BorderRadius.circular(20), // Your desired shape with round corners
11    ),
12  ),
13)

​

This snippet conjures an OutlinedButton complete with an icon that suggests exploration—inviting users to venture forth, perhaps into a different part of your app. Notice how we've set the icon property with an Icon widget and the label property with a Text widget, effectively dictating who controls what is displayed inside the button.

Let's notch up the customization—a dash of interactivity that makes the icon more meaningful:

1OutlinedButton.icon(
2  icon: Icon(Icons.add_shopping_cart, color: Colors.green),
3  label: Text('Add to Cart'),
4  onPressed: () {
5    // Handle item addition to cart
6  },
7  style: OutlinedButton.styleFrom(
8    onSurface: Colors.grey, // Color when the button is disabled
9    primary: Colors.green, // The primary color of the button when enabled
10  ),
11)

​

In the example above, the icon changes colors according to the button's state, thanks to the primary and onSurface properties—green when available to interact with and grey when disabled. Your shoppers won't miss this 'Add to Cart' button, assuring you a satisfying beep at the checkout of your Flutter app store.

And for those illuminating moments when one icon just isn't enough, behold, the power of composition:

1OutlinedButton.icon(
2  icon: Icon(Icons.send),
3  label: Text('Send Magic'),
4  onPressed: () {
5    // Trigger a magic spell
6  },
7  style: ButtonStyle(
8    foregroundColor: MaterialStateProperty.resolveWith<Color>(
9      (Set<MaterialState> states) {
10        if (states.contains(MaterialState.pressed)) {
11          return Colors.orange; // Icon color changes when the button is pressed
12        }
13        return Colors.deepPurple; // Icon's default color
14      },
15    ),
16    overlayColor: MaterialStateProperty.all<Color>(Colors.amberAccent.withOpacity(0.5)), // Highlight color upon press
17  ),
18)

​

Doesn't it feel like you're sending a magical parchment with a tap? That's the allure of icons in OutlinedButtons.

With your Flutter OutlinedButton now wearing its icon as a badge of identity, it's primed to steal the show in any app's UI theater. Whether you choose icons for clarity, delight, or just downright whimsy, they're sure to give your buttons the edge they deserve.

Implementing a Custom Elevation with Flutter OutlinedButton

Custom elevation is like giving your Flutter OutlinedButton a pair of stylish shoes that subtly lift it off the page. Elevation casts a subtle shadow below your widget's location, creating a sense of depth and making the button more tangible in your users' eyes.

While traditional elevation is linked with the ElevatedButton, the beauty of Flutter lies in its flexibility. You might wonder, "An OutlinedButton with elevation? Preposterous!" Hold that thought, because Flutter’s styling prowess grants you the power to do just that without any hullabaloo. Let's see how you can raise your outlined button a notch above the rest.

By default, an OutlinedButton has no shadow. However, with a flick of our Dart wand, we can conjure one:

1OutlinedButton(
2  onPressed: () {
3    // Define the method to handle button press
4  },
5  style: ButtonStyle(
6    elevation: MaterialStateProperty.resolveWith<double>(
7      (Set<MaterialState> states) {
8        if (states.contains(MaterialState.pressed)) {
9          return 6.0; // Button is pushed a bit closer to the user
10        }
11        return 0; // Flat when not pressed
12      },
13    ),
14    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
15      RoundedRectangleBorder(
16        borderRadius: BorderRadius.circular(8.0), // Aesthetic radius
17      ),
18    ),
19    side: BorderSide(color: Colors.purple, width: 2), // Custom border styling
20  ),
21  child: const Text('Elevate'),
22)

​

Here, an elevation is given only when the button state includes MaterialState.pressed.

But what about a constant hint of elevation? Perhaps to distinguish it as an actionable element at all times? Sure, that calls for a steady shadow:

1OutlinedButton(
2  onPressed: () {
3    // Press me to see what happens
4  },
5  style: ButtonStyle(
6    elevation: MaterialStateProperty.all<double>(2.0), // Constant mild elevation
7    side: BorderSide(color: Colors.indigo, width: 1),
8    backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
9    overlayColor: MaterialStateProperty.all<Color>(Colors.indigo.withOpacity(0.1)), // Faint ripple effect on press
10  ),
11  child: const Text('Always Above'),
12)

​

In this creation, your button is perpetually elevated, creating a very light but present shadow that defines its outline on the interface canvas.

Custom elevations can provide visual feedback that enhances the user experience. It's akin to having a conversation with your users where the button responds to their taps with a welcoming rise.

Conclusion: Perfecting the Flutter OutlinedButton

The Flutter OutlinedButton is the ideal candidate for secondary actions, offering them a subtle stage without overshadowing the main attractions and focus of your app. It's the button you reach for when the action is crucial but not urgent, supporting your design with understated elegance and practical functionality.

Armed with the knowledge to customize and animate, you now have the power to integrate this widget seamlessly into your applications. So, go forth and populate your Flutter UIs with OutlinedButtons that are as stylistically fitting as they are functionally compelling.

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.