OutlineButton Widget - Flutter Widget Guide By Flutter Agency

OutlineButton Widget – Flutter Widget Guide By Flutter Agency

In the previous article, we have discussed RaisedButton Widget in this article we will be discussing OutlineButton Widget.

What is OutlineButton Widget?

Flutter comes with an inbuilt widget is known as OutlineButton to set the border on a button . OutlineButton Widget is used for more emphasis than text buttons due to the stroke.

The constructor of OutlineButton Widget will look like below :

OutlineButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    double highlightElevation,
    BorderSide borderSide,
    Color disabledBorderColor,
    Color highlightedBorderColor,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior: Clip.none,
    FocusNode focusNode,
    bool autofocus: false,
    Widget child,
  });

The code snippet for OutlineButton Widget will look like below :

OutlineButton(
        child: new Text("Outline Button"),
        borderSide: BorderSide(
          color: Colors.purple,
        ),
        onPressed: () {
          print("HELLO");
        },
      ),

It will generate output like below :

OutlineButton Widget

OutlineButton 

Some properties of OutlineButton are as listed below :

Color: This is the color used for the background color of the button while it is in it’s the default, unpressed state.

The code snippet to set color will look like below :

color: Colors.orange,

splash color: This is the primary color used for the button when it is in a pressed state.

splashColor: Colors.red,

disabledBorderColor: This property is used to define the Outline border’s color when the button is not enabled

The code snippet will look like below :

disabledBorderColor: Colors.orangeAccent,

highlightedBorderColor: This property is used to define the outline border’s color when the button is enabled and pressed. Code Snippet for it will look like below :

 highlightedBorderColor: Colors.cyanAccent,

By applying highlightedBorderColor our output will look like below :

OutlineButton Widget

highlightedBorderColor Outline Button

borderSide: Defines the color of the border when the button is enabled but not pressed, and the border outline’s width and style in general. Code snippet for it will look like below :

 borderSide: BorderSide(
          color: Colors.purple,
        ),

Shape: It provides the shape of the button. Users can select the Shape as per requirement.

The code snippet will look like below :

  shape: new RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(26.0),
        ),

Above code will give us output like below :

OutlineButton Widget

RoundedRectangleBorder Outline Button

 shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.circular(26.0),
        ),

Above code will give us output like below :

OutlineButton Widget

ContinuousRectangleBorder

If a user wishes to use OutlineButton and Icon together into User can use OutlineButton.icon. Code snippet for OutlineButton.icon is as follows :

OutlineButton.icon(
        onPressed: () {
          print("Outline Button is Clicked");
        },
        highlightedBorderColor: Colors.cyanAccent,
        splashColor: Colors.red,
        borderSide: BorderSide(
          color: Colors.purple,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(26.0),
        ),
        icon: const Icon(
          Icons.add,
          size: 18.0,
        ),
        label: const Text('ICON OUTLINE BUTTON'),
      ),

Above code will give us output like below :

OutlineButton Widget

OutlineButton.icon

Thanks for being with us on a Flutter journey !!!
Need more assistance?

Do Contact Us !!!

Connect With Us

Nirali Patel

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on