A FloatingActionButton Widget are used to represents the primary action of any application screen. Generally, this button is located at the right side bottom of the screen. So in this article, lets discuss simple steps to change the child icon color of FloatingActionButton in any Flutter app development?

Steps to Change the child icon color of FloatingActionButton in Flutter App?

User can wrap in an IconTheme

child: new IconTheme(
    data: new IconThemeData(
        color: Colors.yellow), 
    child: new Icon(Icons.add),
),

or a Theme where iconTheme is set the as the way you want in your app.

To change the color of the child’s Icon, You have to set the color in the Icon Widget.

The code snippet will look like the below:

floatingActionButton: FloatingActionButton(
        tooltip: 'Increment',
        child: new Icon(Icons.add, color: Colors.red,),
        backgroundColor: Colors.yellow,
      ),

You can also try the below way:

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add,
      color: Colors.black, //The color which you want set.
    ),
    onPressed: () => {},
  ),

Example

class FloatingButtonExample extends StatelessWidget {
  const FloatingButtonExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Floating Action Button"),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Increment',
        onPressed: () {},
        child: const Icon(
          Icons.person,
          color: Colors.lime,
        ),
        backgroundColor: Colors.black,
      ),
    );
  }
}

Output:

Conclusion:

In this article, learn how to execute when clicking the back button in Flutter app development?

Hope you enjoy this article. Drop us your feedback/suggestion.

Need support for Flutter App Development?

Thanks for Reading !!!
Keep Learning !!! Keep Fluttering !!!

Flutter Agency is a leading Flutter app development company and a dedicated portal for Flutter technology news & updates. Learn from Flutter experts, and consult our developer for professional app creation.