temirbek
temirbek

Reputation: 1452

How to use Flutter Cupertino Icons?

I know that to use them you have to import 'package:flutter/cupertino.dart';and use it like this Icon(CupertinoIcons.info); but it's hard to pick needed icon.

Dear Flutter team, please make complete Cupertino icons reference somewhere. One place has names without icons and other has icons without names.

UPDATE:

As Mariano noted and as shown in this answer name mapping is not yet complete and we can use icons as follows:

 const IconData baseball = const IconData(0xf3dd,
          fontFamily: CupertinoIcons.iconFont,
          fontPackage: CupertinoIcons.iconFontPackage);
 Icon(baseball);

Where 0xf3dd is a code of an icon (f3dd) which you can find here.

Upvotes: 18

Views: 15357

Answers (1)

Mariano Uvalle
Mariano Uvalle

Reputation: 755

You answered your own question, the usage of the CupertinoIcons class is as you described.


You are right though, there is no easy way to find the name of the icon from the map image provided in the github repository, since they don't directly map the system icons described by Apple in their human interface guidelines: Human interface guidelines

You can go to the main flutter repository and open an issue about this subject Flutter Github repo.
You could even contribute the map yourself and help other developers that might be having the same issue.

Upvotes: 6

Related Questions