Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change background color of flutter app icon

Tags:

flutter

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

like image 597
Phuoc Avatar asked Dec 21 '20 11:12

Phuoc


People also ask

How do you change the app icon on flutter?

Let's first add the package to pubspec. yaml . Then all you need to do is give your icon path as it is shown and that's all. You can give different paths for Android and IOS as well.

How to change the background color of a screen in flutter?

In this blog post, let’s see how to change the background color of a screen in Flutter. Making Scaffold widget as the root of your screen will help you to change the background color. Using Scaffold class basic material design layout can be applied.

How to set app bar color in flutter?

Create a basic Flutter application, and copy the code of following main.dart into your application’s main.dart. In this application, we are setting the app bar color in Scaffold.

How to change the background color of scaffold widget in flutter?

Making Scaffold widget as the root of your screen will help you to change the background color. Using Scaffold class basic material design layout can be applied. It has a property named backgroundColor to change the background color of the Scaffold widget. Following is a Flutter example where the background color of the screen is defined.

What is @flutter SDK?

Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon.


2 Answers

  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.
like image 149
Subair K Avatar answered Nov 10 '22 01:11

Subair K


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"
like image 33
Vasile Carazanu Avatar answered Nov 10 '22 01:11

Vasile Carazanu