How to create a floating button in Flutter

Question

Hi Guys,

I am new to the flutter framework. I want to create a floating button in my app. How can I do that?

Answer 1

Hi@akhtar,

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field. You can see the below code.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Floating Action Button'),
    ),
    body: Center(
      child: const Text('Press the button below!')
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        // Add your onPressed code here!
      },
      child: Icon(Icons.navigation),
      backgroundColor: Colors.green,
    ),
  );
}

To know more about Flutter, join our Flutter Course today.

Answer 2

Scaffold widget provides floatingActionButton property. You can just use FloatingActionButton() as value.

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

//body: Container(),

floatingActionButton: FloatingActionButton(

backgroundColor: Colors.blue,

child: Icon(Icons.add),

onPressed: () {},

),

),

);

}

}

This will print a FloatingActionButton.