FlatButton Widget in Flutter - GeeksforGeeks

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
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})
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:
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.
ankit_kumar_
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Checkbox Widget
Dart Tutorial
Flutter - BoxShadow Widget
ListView Class in Flutter
Flutter - DropDownButton Widget
Flutter Tutorial
Flutter - Checkbox Widget
Flutter - BoxShadow Widget
Flutter - Flexible Widget