How to change shape, size and location of Floating Action Button in Flutter App

By default, the shape of the floating action button (FAB) in the flutter is circular and the location is bottom right floated. You can change the location and shape of the floating action button using properties in Scaffold() widget class and FloatingActionButton() widget class.

To change the shape of the Floating action button:

You can use the shape property of FloatingActionButton() widget class. Implement BeveledRectangleBorder() on this property.

FloatingActionButton( 
     shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.zero
     ),
)

The output will be a square floating action button, increase the border-radius value to make a circular type shape.

To change the size of the Floating action button:

To change the size of the floating action button, wrap it with SizedBox() widget and pass custom height and width.

SizedBox( 
    height:100,
    width:100,
    child:FloatingActionButton( 
       child: Icon(Icons.add), //child widget inside this button
       onPressed: (){
            print("Button is pressed.");
             //task to execute when this button is pressed
        },
     ),
),

To change the location of the Floating action button:

To change the location of the floating action button on the screen, use floatingActionButtonLocation property of Scaffold() widget.

Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
)

Flutter App Example:

import 'package:flutter/material.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
         home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: SizedBox( 
          height:100,
          width:100,
          child:FloatingActionButton(
              child: Icon(Icons.add), //child widget inside this button
              shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.zero
              ),
              onPressed: (){
                print("Button is pressed.");
                //task to execute when this button is pressed
              },
            ),
        ),
        backgroundColor: Colors.blue[100], //background color of scaffold
        appBar: AppBar(
            title:Text("Floating Action Button"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
  
        body: Center(
          child:Text("Floating Action Button")
        )
     );
  }
}

Output:

Square shape Floating Action Button Centered Floating Action Button Large size Floating Action Button

In this way, you can change the shape, size, and location of FloatingActionButton() widget.

No any Comments on this Article


Please Wait...