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 

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 :

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 :

RoundedRectangleBorder Outline Button

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

Above code will give us output like below :

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.icon

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

Do Contact Us !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.