Flutter Icon with Specific Color
If you have started with Flutter, it is of very high probability that you have used an Icon. But, do you know that you can change the color of an Icon. Yes. You can change the color of an Icon, and you can change it to any specific color as per your Application requirement.
Icon widget has color
attribute, where in you can choose a color from pre-defined colors, or from an ARGB hex value using Color.fromARGB(), or any of such allowed way.
Example: Change Flutter Icon Color
In this Example, application, we shall display some icons with their colors changed using color
attribute of Icon
class.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Tutorial - googleflutter.com'),
),
body: Center(
child: Column(children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: Icon(
Icons.cake,
color: Colors.red,
size: 100,
),
),
Container(
margin: EdgeInsets.all(10),
child: Icon(
Icons.settings,
color: Colors.green,
size: 100,
),
),
Container(
margin: EdgeInsets.all(10),
child: Icon(
Icons.voice_chat,
color: Colors.purple,
size: 100,
),
),
]),
),
),
);
}
}
Screenshot
![Flutter Icon Color](https://googleflutter.com/wp-content/uploads/2020/01/flutter_icon_color.png)
The icons are displayed with the corresponding colors provided.
Summary
In this Flutter Tutorial, we learned how to change the color of an Icon in Flutter Application, with the help of well detailed example Application.