FlatButton Widget in Flutter

FlatButton is the material design widget in a flutter. It is a text label material widget that performs an action when the button is tapped. Let’s understand with the help of examples. 

Disclaimer: As of May 2021 the FlatButton class in flutter is deprecated. TextButton class should be used instead. The later class will eventually be removed from flutter SDK, so it is suggested to move to the newer class.

List of replaced classes:

• FlatButton → TextButton
• RaisedButton → ElevatedButton
• OutlineButton → OutlinedButton
• ButtonTheme → TextButtonTheme, ElevatedButtonTheme, OutlineButtonTheme

Constructor of FlatButton class:

Syntax:
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})

Properties:

• child: the button’s label.
• textColor: the color of the text.
• color: the color of the button.
• splashColor: the splash color of the button.
• shape: the shape of the flat button.
• onPressed: the required callback function.
• onLongPress: the callback function when the button is long pressed.

Example:

The main.dart file

Dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/basic.dart';
import 'package:flutter/src/widgets/framework.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlatButton',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String txt='';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.lightBlue[50],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              // splashColor: Colors.red,
              color: Colors.green,
              // textColor: Colors.white,
              child: Text('Flat Button',),
              onPressed: () {
                setState(() {
                  txt='FlatButton tapped';
                });
              },
            ),

            Text(txt,textScaleFactor: 2),
          ],
        ),
      ),
    );
  }
}

Output:

If the properties are defined as below:

FlatButton(
    color: Colors.green,
        child: Text('Flat Button',),
        onPressed: () {
           setState(() {
           txt='FlatButton tapped';
            });
          },
      ),

The following design changes can be observed:

If the properties are defined as below:

FlatButton(
         color: Colors.green,
         textColor: Colors.white,
         child: Text('Flat Button',),
         onPressed: () {
            setState(() {
            txt='FlatButton tapped';
             });
           },
       ),

The following design changes can be observed:

If the properties are defined as below:

FlatButton(
       splashColor: Colors.red,
       color: Colors.green,
       textColor: Colors.white,
       child: Text('Flat Button',),
       onPressed: () {
           setState(() {
           txt='FlatButton tapped';
            });
          },
     ),

The following design changes can be observed:

Explanation:

• Create FlatButton with the child as a Text widget.
• When the button is tapped, onPressed function will be called and set the txt to “FlatButton tapped”.
• Give the button color as green.