Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

Flutter Floating Action Button Example

In the 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, foreground 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{
  @override
  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 take some actions, but here it’s not doing anything.

Final Output

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

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

Output: