Flutter FloatingActionButton – Change Background Color

FloatingActionButton backgroundColor

You can change the background color of a FloatingActionButton using its property backgroundColor. Set backgroundColor with a Color object.

A quick skeletal code snippet to do so is shown below.

FloatingActionButton(
  ...,
  backgroundColor: Colors.lightGreen,
),

Example 1: Set background color to FloatingActionButton

In this example Flutter Application, we shall set backgroundColor property of FloatingActionButton, to Colors.lightGreen.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        backgroundColor: Colors.lightGreen,
        onPressed: () => setState(() {
          //do something
        }),
      ),
    );
  }
}

Screenshot

Flutter FloatingActionButton backgroundColor

Summary

In this Flutter Tutorial, we learned how to change the background color of a FloatingActionButton.