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,260 points
5,104 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,
    ),
  );
}

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

answered Aug 21, 2020 by MD
• 95,460 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,460 points
2,126 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,460 points
2,232 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,460 points
999 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 25, 2020 in Others by MD
• 95,460 points
918 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,260 points
1,170 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,460 points
1,483 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,460 points
1,799 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,460 points
898 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,460 points
1,060 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP