cft

How to Change the Child Icon Color of FloatingActionButton in Flutter?

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?


user

Flutter Agency

2 years ago | 2 min read

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.

Upvote


user
Created by

Flutter Agency

Flutter Agency is the US Leading Flutter app development company build innovative and cutting-edge desktop apps and mobile apps using Flutter framework. Contact us today to get started!


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles