How to create a floating button in Flutter

0 votes

Hi Guys,

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

Aug 21, 2020 in Others by akhtar
• 38,170 points
1,551 views

2 answers to this question.

0 votes

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,
    ),
  );
}
answered Aug 21, 2020 by MD
• 95,060 points
0 votes

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. 

create floatingactionbutton flutter

answered Nov 9, 2020 by Vijay
• 200 points

Related Questions In Others

0 votes
1 answer

How to create a Volume Icon in Flutter App?

Hi@akhtar, You can use Icon Widget to create ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,060 points
268 views
0 votes
1 answer

How to create a container widget in Flutter?

Hi@akhtar, Container means a parent widget that contains ...READ MORE

answered Jul 28, 2020 in Others by MD
• 95,060 points
164 views
0 votes
1 answer

How to create a FlatButton in Flutter?

Hi@akhtar, A flat button is a text label ...READ MORE

answered Aug 12, 2020 in Others by MD
• 95,060 points
82 views
0 votes
1 answer

How to create a navigation bar in Flutter app?

Hi@akhtar, To add a drawer to the app, ...READ MORE

answered Aug 24, 2020 in Others by MD
• 95,060 points
161 views
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,170 points
127 views
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,060 points
207 views
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,060 points
327 views
0 votes
1 answer

How to create a Project in Flutter?

Hi@akhtar, Flutter has an inbuilt command to create ...READ MORE

answered Jul 20, 2020 in Others by MD
• 95,060 points
112 views
0 votes
1 answer

How to create an Icon Button in Flutter?

Hi@akhtar, To create an Icon Button in Flutter, ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,060 points
124 views