flutter-floating-action-button
flutter-floating-action-button
flutter-floating-action-button

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: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+