FlatButton Widget – Flutter Widget Guide By Flutter Agency

FlatButton Widget basically used to showing buttons that lead to secondary functionalities of the application like viewing files from the Gallery, navigate to other screens, etc

What is FlatButton Widget in Flutter?

FlatButton Widget is a simple button that has no much-highlighted decoration and mostly used on toolbar and dialog etc. It has two required property Child and onPressed().

Default constructor of FlatButton Widget will look like below:

FlatButton({
Key key, 
@required VoidCallback onPressed, 
VoidCallback onLongPress, 
ValueChanged<bool> onHighlightChanged,
MouseCursor mouseCursor,
ButtonTextTheme textTheme, 
Color textColor, 
Color disabledTextColor, 
Color color, 
Color disabledColor, 
Color focusColor, 
Color hoverColor, 
Color highlightColor, 
Color splashColor, 
Brightness colorBrightness, 
EdgeInsetsGeometry padding, 
VisualDensity visualDensity, 
ShapeBorder shape, 
Clip clipBehavior: Clip.none, 
FocusNode focusNode, 
bool autofocus: false, 
MaterialTapTargetSize materialTapTargetSize, 
@required Widget child,
})

In Above constructor all fields marked with @required must not be empty.

How to use FlatButton Widget  in Flutter ?

FlatButton Widget doesn’t have an elevation like a RaisedButton Widget also there is no default color to the button and text color is black.

FlatButton(
          color: Colors.orangeAccent,
          onPressed: () {
            // To do
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "FlatButton",
              ),
            ],
          ),
        ),

It will look like below:

FlatButton Widget 

Properties:

• Color : Background color for a Button. It will override any themed color provided. In our example, we have used orangeAccent as a background Color of the FlatButton. Users can choose the color as per requirement.

 color: Colors.orangeAccent,

• Shape: It provides the shape of the button.

User can select from shape as listed below :

1. RoundedRectangleBorder

2. ContinuousRectangleBorder

3. BeveledRectangleBorder

Code snippet for RoundedRectangleBorder is as below :

shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(28.0),
          ),

RoundedRectangleBorder

Code snippet for ContinuousRectangleBorder is as below :

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

We will get output like below :

ContinuousRectangleBorder

Code snippet for BeveledRectangleBorder is as below :

 shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(28.0),
          ),

Which will generate output like below :

BeveledRectangleBorder

• textColor : This is used to set the color of the text in FlatButton widget.

Code snippet will look like below :

 textColor: Colors.white,

• disabledColor: This is the color used for the button when it is in its disabled state.

Code snippet will look like below :

 disabledColor: Colors.grey,

• disabledTextColor: This is the color to use for this button’s text when the button is disabled.

Code snippet will look like below :

  disabledTextColor: Colors.black,

• splashColor: The splash color of the ink response. If this property is null then the splash color of the theme, ThemeData.splashColor, will be used.

Code snippet for splashColor will look like below :

 splashColor: Colors.blueAccent,

• onPressed(): This function will show what action will be performed once FlatButton is pressed.

Code snippet for onPressed() will look like below :

 onPressed: () {
            print("Clicked");
            // To do
          },

Conclusion:

In this article, we have been through What is FlatButton Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Kindly do let us know if you need further assistance.

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.