“This is the 10th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

In the last article, we have simply operated how to build the main framework of a project, but so far, we have not used our local resource files for the project, such as pictures, so today’s article, we mainly introduce how to use local resource files;

Android project configuration

As an iOS developer, we have been very skilled in configuring ICONS, launching images and changing App names in Xcode. Now let’s take a look at how to set up relevant configurations for Android projects.

Changing the App name

In the project directory, we find the androidmanifest.xml file, whose path is:

Project – > android – > app – > SRC – > main – > AndroidManifest. The XML

In this file, modifyAndroid:labelforFlutter engineering:Then runAppAnd then back to the background, we can see that in the Android emulator,AppThe name is already displayed asFlutter engineering:

Modify the App icon

We are iniOSICONS are divided into1x.2xand3x; inAndroidICONS of different sizes should be placed in different folders:Among themmipmap-xhdpiFolders containing pictures are equivalent toiOSIn the2x;mipmap-xxhdpiThe images stored in theiOSIn the3x; In general, when you give an icon,AndroidICONS will be sorted into folders for development;

Here, for convenience, we directly use the wechat icon:

It should be noted that the image name should not use the camel name method, the recommended use of _ underscore;

Then, inAndroidManifest.xmlModify in fileandroid:iconfor@mipmap/app_icon, do not add suffix name; Then runAppAfter that, check the effect:

Add App startup diagram

We put the corresponding size of the startup diagram inmipmap-hdpiandmipmap-mdpiUnder the folder; Then changelaunch_background.xmlFile:

If there are more than one launch_background.xml file, these files need to be modified;

Uncomment the red box of the file and change android: SRC to @mipmap/launch_image.

Operation effect:

Using local images

With theiosandandroidCreate a folder in the same directoryimages(you can customize the folder name), copy the pictures you need to use to this folder; And then modify the filepubspec.yaml; The file location is as follows:Uncomment the contents of the red box. It should be noted that the format is not correct after uncomment, and an error will be reported when running the project:This document is very strict about the format,assetsIt has to go with the topuses-material-designAlign, and then the following contents advance one space at a time:

The final result is as follows:

“Images” is the name of the folder where the image was stored;

Using the image, change the bottom navigation icon:The final code is as follows:

  • icon: Bottom navigationitemThe default icon of the
  • activeIcon: Bottom navigationitemThe selected icon of;

Note that this must be followed by the suffix of the picture, otherwise the picture will not be displayed

Final interface effect:

  • Android effect:

  • Effect of the iPhone