Changing the size of a floating action button in Flutter

How to change the size of a floating action button in Flutter:

There is one property available for changing the size of a floating action button in Flutter. It is a boolean property called mini. In this post, we will learn how to use it with an example.

mini property:

mini property is defined as below:

bool mini

By default, the floating action button in flutter is 56 logical pixels height and width. This is the normal size or non-mini size. If you add this property mini with a value true, it will create a smaller floating action button.

Example flutter project:

Let’s take a look at the below project:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FAB Example'),
      ),
      body: Center(child: const Text('Example of FAB')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add_a_photo),
        backgroundColor: Colors.red
      ),
    );
  }
}

Here, a floating action button is added in normal form. If you run this app, it will create the button as like below:

And, we can mark it as mini:

 floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add_a_photo),
        backgroundColor: Colors.red,
        mini: true,
      ),

It will create:

CodeVsColor

Changing the size of a floating action button in Flutter

How to change the size of a floating action button in Flutter:

mini property:

Example flutter project:

You might also like: