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?
Flutter Agency
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.
Upvote
Flutter Agency
Hi I am Rubeen

Related Articles