How to use Flutter Cupertino Icons?

11,666

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.

Share:
11,666

Related videos on Youtube

temirbek
Author by

temirbek

Web dev (PHP, javascript, mysql, Yii2, Linux), Android (Java), Flutter

Updated on July 01, 2022

Comments

  • temirbek
    temirbek almost 2 years

    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.