Deep Dive into Flutter Floating Action Button (FAB)

This tutorial, we’re going to working with Flutter Floating Action Button (FAB). To work with that, we need to create new flutter project

flutter create flutterdemo
cd flutter demo

Now, let’s work with our main.dart file

Floating Action Button Example 1

Let’s create FAB with Simple Icon

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterOwl"),
        backgroundColor: Colors.lightBlue[900],
      ),
      body: Center(child: Text("Floating Action Button")),
      
      
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.orange,
        child: Icon(Icons.search),
        onPressed: () {},
      ),
    );
  }
}

Output


Floating Action Button Example 2

Let’s create a FAB with Text & Icon

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterOwl"),
        backgroundColor: Colors.lightBlue[900],
      ),
      body: Center(child: Text("Floating Action Button")),

      floatingActionButton: FloatingActionButton.extended(
        backgroundColor: Colors.orange,
        icon: Icon(Icons.search),
        label: Text("Search"), 
        onPressed: () {},
      ),

    );
  }
}

Output


Share on:

Download Source Code:


Comments: