Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use icon on quick_actions

Tags:

flutter

I have a doubt about the icon property of Quick Icons.

Can someone give a proper example of how to use it?

A list of names of native supported icons would be great.

There is a way to use custom icons? If yes, how?

like image 731
Marcus M. Avatar asked Oct 15 '25 07:10

Marcus M.


2 Answers

I had the same confusion but reading the documentation helped.

The optional icon should be the name of the native resource (xcassets on iOS or drawable on Android) that the app will display for the quick action.

You can add native android icons following these steps

  1. In Project Hierarchy

    Your app name > android > new > Image Asset

    You'll be shown this window.

    enter image description here

Configure the settings as shown in the image, and change the icon, name and color according to your requirement.

  1. After adding the icon, assign its name to the quick_actions item

     ShortcutItem(
              type: 'add',
              localizedTitle: 'Add Goal',
              icon: 'add_icon')
    
like image 73
ASAD HAMEED Avatar answered Oct 18 '25 01:10

ASAD HAMEED


In addition to the answers regarding Android, here's what you need to do for iOS

  1. Generate & download the icons using the App Icon Generator
  2. Open your project in Xcode
  3. In the sidebar, "Show the Project Navigator" (icon on the left) and click on "Assets" picture for step 3
  4. Click on "+" > "Image Set" picture for step 4
  5. You can now enter a name for the image set. When you also want to use the icon on Android, you should name it the same (probably something like "ic_quick_actions_my_action_here") - The image name must be the same for Android and iOS.
  6. You can now add three versions of your image. Remember that your images are located under Assets.xcassets/AppIcon.appiconset in your extracted app icons. I'm not sure on this, so please correct me if I'm wrong, but here's what I did:
  • 1x: Load image "29.png"
  • 2x: Load image "60.png"
  • 3x: Load image "120.png" picture for step 6
  1. Now you should be ready to go! You may need to uninstall the App and reinstall it using Flutter or XCode to see your icon in the quick actions menu.

Tips

I'm not sure if this is required, but I painted my pictures completely black, which seems to be working flawlessly.

To use Material Icons, you can find & download from a huge list of icons from https://pictogrammers.com/library/mdi/. I recommend you always to download the SVG version.

like image 45
Myzel394 Avatar answered Oct 18 '25 00:10

Myzel394



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!