Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 563
temirbek Avatar asked Apr 02 '19 06:04

temirbek


People also ask

How do you import Cupertino icons in Flutter?

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.

What are Cupertino icons?

Cupertino Icons This is an asset repo containing the default set of icon assets used by Flutter's Cupertino widgets.


1 Answers

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.

like image 103
Mariano Uvalle Avatar answered Oct 12 '22 13:10

Mariano Uvalle