FlatButton Widget

What is FlatButton Widget?

A material design flat button, is a text label displayed on a (zero elevation) and reacts to touches by filling with color.

Flat buttons intentionally do not have visible borders and must therefore rely on their position relative to other content for context.

Flat buttons have a default minimum size of 88.0 by 36.0.

If the onPressed and onLongPress callbacks are null, then this button will be disabled, will not react to touch.

Default Constructor

The default constructor create a simple text button.

The autofocus and clipBehavior arguments must not be null.

FlatButton(
    onPressed: // required
    textTheme:
    textColor:
    color:
    shape:
    child: // required,
  })

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The onPressed parameter is to callback when the button is tapped or otherwise activated.

The textTheme parameter defines the button's base colors, and the defaults for the button's minimum size, internal padding, and shape.

The textColor parameter is to define the text color of the button

The color parameter is to fill the button with color

The shape parameter is to define shape of the button's.

The child parameter is to add the child widget below the OffStage widget in a tree.

Code snippet

FlatButton(
          onPressed: () {
            print('Hello World!');
          },
          child: Text('Touch'),
        )

Demo Code

This example shows a simple FlatButton which reacts to touch event and prints the Hello World! to console.

import 'package:flutter/material.dart';

class FlatButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: FlatButton(
          onPressed: () {
            print('Hello World!');
          },
          child: Text('Touch'),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlatButton Demo'),
        ),
        body: FlatButtonDemo(),
      ),
    );
  }
}

void main() => runApp(MyApp());