Dependency management in Flutter

Dependency management in Flutter

In APP development, we know that an application consists of two main parts: code and resources. Code focuses on logical functionality, while resources such as images, strings, fonts, configuration files, and so on focus on visual functionality. Now that I have learned more about code, I will learn about Flutter’s overall resource management mechanism.

In current UI frameworks, most use: resource externalization, which separates code from resources. For example, in Android, resource files are stored in the res directory, drawable is used for images, and value is used for strings, colors, themes, etc. Flutter does not specify where resources should be placed, only in the pubspace.ymal file at the end.

pubspace.ymal

assets: PNG # Specify to specific file - assets/ic_campaign_charity. PNG # specify to specific file - assets/image/ # Specify folder - Assets /result.json # Specify the specific fileCopy the code

Widget build(BuildContext context) { return Scaffold( body: Column( children: [ Text("data"), Image.asset("assets/ic_campaign_charity.png",width: 100,height: 100,), Image.asset("assets/icon/ic_campaign_diamond.png"), Image.asset("assets/image/ic_ranking_medal_1.png"), Image.asset("assets/image/ic_ranking_medal_2.png"), Image.asset("assets/image/ic_ranking_medal_3.png"), MaterialButton(Child: Text(" load JSON file "),onPressed: () {/ / loading rootBundle loadString (' assets/result. Json). Then ((MSG) = > print (MSG));})],),); }Copy the code

For string file resources, we use the loadString method; For binary resources, the load method is used.

Load ICONS based on pixel density

In the development of Flutter, different ICONS are placed in different folders to fit mobile phones with different pixel densities. How is flutter handled?

Similar to Android and iOS development, Flutter is managed based on pixel density, such as 1.0x, 2.0x, 3.0x, or any other multiple. Flutter can load image resources that are closest to the pixel ratio of the device based on the current device resolution. For better Flutter recognition, our resource directory should be managed separately for 1.0x, 2.0x, and 3.0x image resources.

Create 2.0x and 3.0x directories under the directory and put the corresponding icon inside. Then declare it in pubspace. Ymal

assets: PNG # Specify to specific file - assets/ic_campaign_charity. PNG # specify to specific file - assets/image/ # Specify folder - Assets /result.json # Specify the specific file -assets /icon/ -assets /icon/2.0x/ -assets /icon/3.0x/Copy the code

It can be seen that I did not place the icon of 1.0, but the operation is still ok, which gives us a hint that it is not necessary to place all the ICONS with pixel density. When there is no placing, the system will automatically find the icon with the closest pixel density to the current to load, for example, ICONS of 1.0x and 2.0x are placed. However, the current pixel density of the phone is 3, so the system will first search for 3.x, and then search for 2.0x. If it finds it, it will directly load the display.

Font resource management

Fonts are another common resource. Mobile operating systems generally have only a few default fonts, which can meet our normal needs in most cases. However, in some special cases, we may need to use custom fonts to enhance the visual experience.

Declared in pubspace.ymal

Fonts: font-family: RobotoCondensed # font name fonts: - asset: assets/fonts/RobotoCondensed - Regular. The vera.ttf # ordinary fonts - asset: Assets/fonts/RobotoCondensed - Italic. The vera.ttf style: Italic # italics - asset: assets/fonts/RobotoCondensed - Bold. The vera.ttf weight: 700 # in BoldCopy the code

And then use it in Text

Text(" This is the common font ", style: TextStyle(fontFamily: 'RobotoCondensed',// Common font)); Text(" This is bold ", style: TextStyle(fontFamily: 'RobotoCondensed', fontWeight: fontweight.w700, // bold)); TextStyle(fontFamily: 'RobotoCondensed', fontStyle: Fontstyle. italic, // italic);Copy the code

Resource Settings for native platforms

Flutter applications will actually end up being packaged and run on Android and iOS as a native project, so Flutter startup relies on the native Android and iOS operating environment.

Therefore, the resources mentioned above can only be managed after the Flutter starts. However, some resources that need to be managed before the Flutter starts need to be configured native, such as the startup icon of the APP.

Android startup icon: in the Mipmap directory, if you want to replace it in the inside;

IOS start icon: start figure is located in the root directory of iOS/Runner/Assets. Xcassets/AppIcon appiconset. Again, we just need to follow the corresponding pixel density criteria, replace it with the target resource and keep the original icon name.

Management of third-party libraries in Flutter

Pubspace. Ymal not only manages resource files, but also the dependencies of Flutter engineering code, such as third-party libraries, Dart runtime environments, and Flutter SDK versions.

First let’s see what pub is.

Dart provides the package management tool Pub to manage code and resources. Dart provides the official package repository Pub, similar to JCenter/Maven in Android, CocoaPods in iOS, and the NPM library in the front end. Through Pub, we can easily find useful third-party packages. The pub’s official website

Check out pubspace.yaml

Description: A new Flutter application. # application description publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: Dart Dart Dart Dart Dart Dart Dart Dart Dart Dart Dart ">=2.7.0 <3.0.0" Vesion dev_dependencies: flutter_test: SDK: flutter: uses-material-design: true PNG # Specify to specific file - assets/ic_campaign_charity. PNG # specify to specific file - assets/image/ # Specify folder - Assets /result.json # Specify the specific file -assets /icon/ -assets /icon/2.0x/ -assets /icon/3.0x/Copy the code

When we rely on third-party libraries that are not publicly available, or packages that are currently under development and debugging, we need to set up the data source and declare the package using a local path or Git address.

dependencies: package1: path: .. Package1 / # path dependence date_format: git: url: https://github.com/xxx/package2.git # git dependencyCopy the code

Then, after downloading all dependent packages, Pub creates. Packages files in the root directory of the application to map the names of dependent packages to the path of the package files in the system cache for subsequent maintenance.

Finally, Pub automatically creates the pubspec.lock file. The pubspec.lock file is similar to the iOS podfile. lock or the front-end package-lock.json file. It is used to record the source and version numbers of directly dependent and indirectly dependent packages actually installed in the current state.

conclusion

Learn about how Flutter manages resources and third-party libraries by declaring the path of resource files in pubSspace. Ymal. Add a third-party library named Name :version under Dependencies. These libraries are managed using the official package repository Pub.