Change background color of flutter app icon

6,130

Solution 1

  1. Open android folder in Android Studio.

  2. Right-click the res folder and select New > Image Asset.

  3. In the Icon Type field, select Launcher Icons (Adaptive & Legacy).

  4. In the Foreground Layer tab, select an Asset Type, and then specify the asset in the field underneath:

  • Select Image to specify the path for an image file. * Select Clip Art to specify an image from the material design icon set. * Select Text to specify a text string and select a font.
  1. In the Background Layer tab, select an Asset Type, and then specify the asset in the field underneath. You can either select a color or specify an image to use as the background layer.
  2. In the Legacy tab, review the default settings and confirm you want to generate legacy, round, and Google Play Store icons.
  3. Optionally change the name and display settings for each of the Foreground Layer and Background Layer tabs:
  • Name - If you don't want to use the default name, type a new name. If that resource name already exists in the project, as indicated by an error at the bottom of the wizard, it's overwritten. The name can contain lowercase characters, underscores, and digits only.

  • Trim - To adjust the margin between the icon graphic and border in the source asset, select Yes. This operation removes transparent space, while preserving the aspect ratio. To leave the source asset unchanged, select No.

  • Color - To change the color for a Clip Art or Text icon, click the field. In the Select Color dialog, specify a color and then click Choose. The new value appears in the field.

  • Resize - Use the slider to specify a scaling factor in percent to resize an Image, Clip Art, or Text icon. This control is disabled for the background layer when you specify a Color asset type. Click Next.

  1. Optionally, change the resource directory: Select the resource source set where you want to add the image asset: src/main/res, src/debug/res, src/release/res, or a custom source set. The main source set applies to all build variants, including debug and release. The debug and release source sets override the main source set and apply to one version of a build. The debug source set is for debugging only. To define a new source set, select File > Project Structure > app > Build Types. For example, you can define a beta source set and create a version of an icon that includes the text "BETA" in the bottom right corner. For more information, see Configure Build Variants. Click Finish. Image Asset Studio adds the images to the mipmap folders for the different densities.

Solution 2

You can create an image filled with color #fe6017 and use it for adaptive_icon_background as in example

flutter_icons:
  android: "launcher_icon"
  ios: false
  image_path: "assets/icon/icon.png"
  adaptive_icon_background: "assets/icon/icon-background.png"
  adaptive_icon_foreground: "assets/icon/icon.png"
Share:
6,130
Phuoc
Author by

Phuoc

Updated on December 26, 2022

Comments

  • Phuoc
    Phuoc over 1 year

    I want to change background icon to #fe6017. I use flutter_launcher_icons, set adaptive_icon_background: "#fe6017". But it doesn't work. I also try to resize image. But it always shrinks and put white color around my image. Thank you.

    enter image description here