FlatButton Widget in Flutter

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.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
          ],
        ),
      ),
    );
  }
}

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.