Flutter Floating Action Button Example

flutter-floating-action-button-example

In last tutorial, we have implemented AppBar with titles, and buttons. Now, we're going to add FloatingActionButton with our existing app.

we're going to modify few properties of Floating action button such as background color, forground color, icon with tooltip

Let's start by coding

Flutter FloatingActionButton example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text("CODESUNDAR"),
        leading: Icon(Icons.menu),
        backgroundColor: Colors.teal[700],
        actions: <Widget>[
          IconButton(icon: Icon(Icons.videocam), onPressed: () => { }),
          IconButton(icon: Icon(Icons.account_circle), onPressed: () => { })
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.chat),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        tooltip: 'Upload',
        onPressed: () => {},
      ),
    ),
    );
  }
}

Explanation:

  • Please visit AppBar Tutorial, If you're reading this article first time
  • We can add floatingActionButton as a property of scaffold
  • Inside floatingActionButton we can add more properties such as child, we can add Text or icon, background & foreground color using Colors Class, we can also add tooltip property for user's hint
  • onPressed() allows you to make some actions, but here it's not doing anything.

Final Output

floating-action-buton-flutter

**Flutter Floating Action Extend example: **We can also add label on FAB using FloatingActionButton.extend(), which looks like below example

floatingActionButton: FloatingActionButton.extended(
  label: Text('Upload'),
  icon: Icon(Icons.chat),
  backgroundColor: Colors.green,
  foregroundColor: Colors.white,
  tooltip: 'Upload',
  onPressed: () => {},
)

Output:

flutter-floating-action-button-extend