In Flutter, the Icon
widget is used to display icons in your app. Flutter provides a set of built-in icons, and you can also use custom icons if needed. Here's a quick guide on how to use the Icon
widget to add icons in Flutter:
1. Using Built-in Icons:
Flutter comes with a set of built-in icons that you can use directly. These icons are part of the Material Design Icons set. Here's an example of how to use a built-in icon:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Icon Example'),
),
body: Center(
child: Icon(
Icons.star, // Replace with the desired icon
size: 48.0,
color: Colors.blue,
),
),
),
);
}
}
In this example, the Icon
widget is used to display a star icon from the built-in set.
2. Using Custom Icons:
You can also use custom icons in your Flutter app. If you have custom icons in SVG format, you can convert them to Flutter-compatible code using tools like FlutterIcon. Here's an example of using a custom icon:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Icon Example'),
),
body: Center(
child: Icon(
IconData(0xe800, fontFamily: 'MyCustomIcons'), // Replace with your custom icon data
size: 48.0,
color: Colors.green,
),
),
),
);
}
}
Replace 0xe800
with the code generated for your custom icon, and set the fontFamily
to the desired font family (usually the name of your custom icon font).
Remember to include any required font files and configurations in your project.
These examples should help you get started with using the Icon
widget in Flutter. Adjust the parameters based on your specific requirements and design preferences.
Top comments (0)