Flutter – FloatingActionButton

Flutter is a mobile app SDK that allows you to build high performance, high-fidelity, apps for iOS and Android, from a single codebase. One key aspect of Flutter is the ability to easily create custom user interface (UI) elements, such as the FloatingActionButton.

What is a FloatingActionButton?

A FloatingActionButton is a material design concept in which a circular button hovers above the user interface and provides access to a set of primary actions in an app. In Flutter, the FloatingActionButton is a customizable and easy-to-use widget.

How to create a FloatingActionButton

To create a FloatingActionButton in Flutter, you can use the FloatingActionButton widget.

The basic syntax for the Flutter FloatingActionButton widget is:

FloatingActionButton(
  onPressed: () {
    // Action to be performed when button is clicked
  },
  child: Icon(Icons.add),
)

Properties of the FloatingActionButton widget

• onPressed: A callback function that is executed when the button is clicked.

• child: A widget that can be used as the icon for the FloatingActionButton.

• backgroundColor: The background color of the FloatingActionButton.

• foregroundColor: The color of the icon in the FloatingActionButton.

• elevation: The elevation of the FloatingActionButton.

• mini: Set to true to create a mini version of the FloatingActionButton.

Example code with FloatingActionButton

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter FloatingActionButton Demo'),
        ),
        body: Center(
          child: Text('Press the FAB!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Action to be performed
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Conclusion

In summary, the FloatingActionButton is a valuable widget in Flutter for creating a quick and easy way to access primary actions in your app. With its customizable properties, you can create a FloatingActionButton that fits your specific UI needs in your mobile application.