Skip to content
Related Articles

Related Articles

FlatButton Widget in Flutter
  • Difficulty Level : Hard
  • Last Updated : 30 Apr, 2021

FlatButton is the material design widget in 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. 

Disclamer: 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 → ElecatedButton
  • 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:

simple flatbutton widget

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:

empty flatbutton widget

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:

coloured flatbutton widget

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.
Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :