flutter-floating-action-button-example
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{
  @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 make some actions, but here it’s not doing anything.

Final Output

floating-action-buton-flutter
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
flutter-floating-action-button-extend
Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of codesundar.com. I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created codesundar.com to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.