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
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
filter_none
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.
