Flutter Floating Action Button Example

flutter-fab-example
flutter-fab-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

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart';

void main() => runApp(<span class="hljs-type">MyApp</span>());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span></span>{
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> implement build</span>
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(home: <span class="hljs-type">Scaffold</span>(
      appBar: <span class="hljs-type">AppBar</span>(
        title: <span class="hljs-type">Text</span>(<span class="hljs-string">"CODESUNDAR"</span>),
        leading: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.menu),
        backgroundColor: <span class="hljs-type">Colors</span>.teal[<span class="hljs-number">700</span>],
        actions: <<span class="hljs-type">Widget</span>>[
          <span class="hljs-type">IconButton</span>(icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.videocam), onPressed: () => { }),
          <span class="hljs-type">IconButton</span>(icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.account_circle), onPressed: () => { })
        ],
      ),
      floatingActionButton: <span class="hljs-type">FloatingActionButton</span>(
        child: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.chat),
        backgroundColor: <span class="hljs-type">Colors</span>.green,
        foregroundColor: <span class="hljs-type">Colors</span>.white,
        tooltip: <span class="hljs-symbol">'Uploa</span>d',
        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

<span class="hljs-attribute">floatingActionButton</span>: FloatingActionButton.extended(
  <span class="hljs-attribute">label</span>: Text(<span class="hljs-string">'Upload'</span>),
  <span class="hljs-attribute">icon</span>: Icon(Icons.chat),
  <span class="hljs-attribute">backgroundColor</span>: Colors.green,
  <span class="hljs-attribute">foregroundColor</span>: Colors.white,
  <span class="hljs-attribute">tooltip</span>: <span class="hljs-string">'Upload'</span>,
  <span class="hljs-attribute">onPressed</span>: () => {},
)

Output: