FloatingActionButton Widget

What is FloatingActionButton Widget?

Default Constructor

The default constructor creates a circular floating action button.

FloatingActionButton(
    onPressed:
    child:
    backgroundColor:
);

Constructor Parameters

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

Configure onPressed parameter to callback that is called when the button is tapped or otherwise activated.

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

Configure backgroundColor parameter to define the button's background color.

Code snippet

FloatingActionButton(
    onPressed: () {
            // Add your onPressed code here!
    },
    child: Icon(Icons.add),
    backgroundColor: Colors.blue,
),

Demo Code

import 'package:flutter/material.dart';

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'FloatingActionButton Widget';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
        ),
        body: Center(child: const Text('Press the button below!')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed code here!
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),
      ),
    );
  }
}

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