Last Updated on 2021-10-15 by Clay
When we use Flutter for application development, we usually need some icons to used as button. Flutter provide some built-in icons for us, but even so, we still need more customize icons.
You may want to say: I can load and display the picture directly!
Yes, this is a way to do it.
But if we use Flutter's built-in Icon class to handle customize icons, we can even let users decide the icon color, which is convenient.
It is hard to explain in words, just look at the following record.
Use customize icons in Flutter
Step 1: Create icon format that Flutter needs
First, we can go to the FlutterIcon website. In addition to upload your svg images and convert into the Flutter support format, you can also download icons provided by others (please pay attention to license).
The usage method is as shown in the picture below: select icons, and search for the picture you want.
After clicking a picture, the blue DOWNLOAD button will show how many pictures you have selected.
You can select Names in the picture below and rename the pictures.
Step 2: Install and Unzip
After downloading, we need to unzip it.
Step 3: Move the downloaded file to the corresponding location of the project
Move the fonts folder in the project directory; place my_flutter_app_icons.dart in the lib folder.
Step 4: Edit pubspec.yaml
Step 5: Use customize icons
import 'package:flutter/material.dart';
import 'package:flutter_app/my_flutter_app_icons.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
// _MyAppState
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Icon(
MyFlutterApp.food,
color: Colors.purple,
size: 100,
),
),
),
);
}
}
Output:
If I am not mistaken, the icon for this meal is not originally provided in Flutter. Now we can freely call this icon in the project using code.
References
- https://www.fluttericon.com/
- https://medium.com/codechai/how-to-use-custom-icons-in-flutter-834a079d977
- https://medium.com/deviniti-technology-driven-blog/the-best-way-to-add-custom-icons-to-your-flutter-project-6381ab697813