当前位置:网站首页>Two minutes will take you to quickly master the project structure, resources, dependencies and localization of flutter
Two minutes will take you to quickly master the project structure, resources, dependencies and localization of flutter
2022-07-05 12:09:00 【CrazyCodeBoy】
In this article , I will bring you to know Flutter What is the project file structure of ?
, Where to archive image resources and how to deal with different resolutions ?
, How to archive strings resources , And how to deal with different languages ? That is what we usually call internationalization
, as well as How to add Flutter The dependencies required by the project ?
First, let's learn Flutter What is the project file structure of ?
What is the structure of the project file ?
One Flutter The usual file structure of a project is like this :
┬
└ projectname
┬
├ android - Android Some engineering documents
├ build - The build output directory of the project
├ ios - iOS Some engineering documents
├ lib - In the project Dart Source file
┬
└ src - Include other source files
└ main.dart - Automatically generated project entry file , similar RN Of index.js file
├ test - Test related documents
└ pubspec.yaml - Project dependent configuration files are similar to RN Of package.json
Of course, you can also adjust as needed .
Where to archive image resources and how to deal with different resolutions ?
- although Android take resources and assets Differential treatment , But in Flutter They will be regarded as assets Handle , All exist in Android On
res / drawable- *
The resources in the folder are placed in Flutter Of assets In the folder . - And Android similar ,iOS Same will images and assets As something different , and Flutter There are only assets. Be put in iOS in Images.xcasset The resources under the folder are Flutter Was put in assets In the folder .
stay Flutter in assets
It can be any type of file , Not just pictures . for example , You can take json File is placed in my-assets In the folder .
my-assets/data.json
Remember in pubspec.yaml
Declaration in the document assets
:
assets:
- my-assets/data.json
Then in the code, we can pass AssetBundle To access it :
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('my-assets/data.json');
}
The complete part of the above code fragment can be found in Course source code Search for .
For the picture ,Flutter image iOS equally , It follows a simple format based on pixel density .Image assets May be 1.0x 2.0x 3.0x Or any other multiple . This devicePixelRatio Represents the ratio of physical pixels to a single logical pixel .
Android Pictures with different pixel densities and Flutter The corresponding relationship of pixel ratio
ldpi 0.75x
mdpi 1.0x
hdpi 1.5x
xhdpi 2.0x
xxhdpi 3.0x
xxxhdpi 4.0x
The complete part of the above code fragment can be found in Course source code Search for .
Assets Can be placed in any properties folder ——Flutter There is no predefined file structure . We need to be in pubspec.yaml
Declaration in the document assets The location of , then Flutter Will recognize them .
for instance , One should be named my_icon.png
Put the picture of Flutter In Engineering , You may want to put it in images In the folder . Put the picture (1.0x) Placed in images In the folder , And put the pictures of other resolutions in the corresponding subfolders , And connect the appropriate proportional coefficient , Just like this. :
images/my_icon.png // Base: 1.0x image
images/2.0x/my_icon.png // 2.0x image
images/3.0x/my_icon.png // 3.0x image
Then we can pubspec.yaml
This image resource is declared in the file :
assets:
- images/my_icon.png
Now? , We can use AssetImage Come and visit it .
return AssetImage("images/a_dot_burr.jpeg");
The complete part of the above code fragment can be found in Course source code Search for .
Can also pass Image
widget Use it directly :
@override
Widget build(BuildContext context) {
return Image.asset("images/my_image.png");
}
More , May refer to stay Flutter Add assets and images.
How to archive strings resources , And how to deal with different languages ?
Unlike iOS To have a Localizable.strings
file ,Flutter At present, there is no special string resource system . at present , The best practice is to strings Resources are stored in classes as static fields . for example :
class Strings {
static String welcomeMessage = "Welcome To Flutter";
}
Then access it like this :
Text(Strings.welcomeMessage)
The complete part of the above code fragment can be found in Course source code Search for .
By default ,Flutter Only American English strings are supported . If you want to support other languages , Please introduce flutter_localizations
package . You may also want to introduce intl Package to support others i10n Mechanism , Such as date / Time format .
dependencies:
# ...
flutter_localizations:
sdk: flutter
intl: "^0.15.6"
The complete part of the above code fragment can be found in Course source code Search for .
To use flutter_localizations
package , Still need to be in app widget It is specified in localizationsDelegates
and supportedLocales
.
import 'package:flutter_localizations/flutter_localizations.dart';
MaterialApp(
localizationsDelegates: [
// Add app-specific localization delegate[s] here
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'), // English
const Locale('he', 'IL'), // Hebrew
// ... other locales the app supports
],
// ...
)
The complete part of the above code fragment can be found in Course source code Search for .
These agents include actual localization values , also supportedLocales
Defined App Which regions are supported . The above example uses a MaterialApp
, So it has GlobalWidgetsLocalizations
For Foundation widgets, Also have MaterialWidgetsLocalizations
be used for Material
wigets Localization of . If you use WidgetsApp
, The latter need not be included . Be careful , Although these two agents include “ Default ” value , But if you want your App localization , You still need to provide one or more agents as your App Localized copy .
When initializing ,WidgetsApp
or MaterialApp
Will use the proxy you specify to create one for you Localizations
widget.Localizations widget The location of the device can be accessed at any time from the current context , Or use Window.locale.
To access localization files , Use Localizations.of()
Method to access specific localized classes that provide proxies . If translation is required , Use intl_translation Pack to take out the translated copy to arb In file . Introduce them App in , And use intl To use them .
more Flutter Details of internationalization and localization in China , Please visit internationalization guide , There are some that don't use intl Sample code for package .
Be careful , stay Flutter 1.0 beta 2 Before , stay Flutter As defined in assets Cannot be accessed on the native side . The resources defined natively are Flutter Not available in , Because they are in separate folders .
How to add Flutter The dependencies required by the project ?
- stay Android in , You can Gradle File to add dependencies ;
- stay iOS in , Usually add dependencies to Podfile in ;
- stay RN in , Is usually package.json To manage project dependencies ;
Flutter Use Dart Build the system and Pub Package manager to handle dependencies . These tools will Android and iOS native The build of the wrapper application is delegated to the corresponding build system .
dependencies:
flutter:
sdk: flutter
google_sign_in: ^3.0.3
stay Flutter in , Although in Flutter In the project Android There is... Under the folder Gradle file , But only use these files when adding the dependencies required for platform related . otherwise , You should use
pubspec.yaml
To declare for Flutter External dependencies of .
iOS Is the same , If your Flutter In the project iOS Folder has Podfile, Please only add iOS Use it for platform related dependencies . otherwise , You should use
pubspec.yaml
To declare for Flutter External dependencies of .
Recommend one for finding Flutter Plug in site :Pub site.
Reference resources
To be continued
- Flutter Basic introduction
- Flutter Themes and word processing
- Flutter What is declarative UI
- Flutter Layout and list
- Flutter Gesture detection and touch event processing
- Flutter State management d
- Flutter Threads and asynchrony UI
- Flutter Form input and rich text
- Flutter Recognize the view (Views)md
- Flutter Call hardware 、 Third party services and platform interaction 、 notice
- Flutter Routing and navigation
- Flutter Project structure 、 resources 、 Dependency and localization
边栏推荐
- 图像超分实验:SRCNN/FSRCNN
- Complete activity switching according to sliding
- MVVM framework part I lifecycle
- byte2String、string2Byte
- 【使用TensorRT通过ONNX部署Pytorch项目】
- 【ijkplayer】when i compile file “compile-ffmpeg.sh“ ,it show error “No such file or directory“.
- Check the debug port information in rancher and do idea remote JVM debug
- Four operations and derivative operations of MATLAB polynomials
- 1 plug-in to handle advertisements in web pages
- 【Win11 多用户同时登录远程桌面配置方法】
猜你喜欢
【TFLite, ONNX, CoreML, TensorRT Export】
abap查表程序
Multi table operation - sub query
Linux Installation and deployment lamp (apache+mysql+php)
ABAP table lookup program
[singleshotmultiboxdetector (SSD, single step multi frame target detection)]
Reading notes of growth hacker
Codeworks 5 questions per day (1700 average) - day 5
Redis集群的重定向
Sentinel sentinel mechanism of master automatic election in redis master-slave
随机推荐
Intern position selection and simplified career development planning in Internet companies
【SingleShotMultiBoxDetector(SSD,单步多框目标检测)】
Principle and performance analysis of lepton lossless compression
2022年国内云管平台厂商哪家好?为什么?
全网最全的新型数据库、多维表格平台盘点 Notion、FlowUs、Airtable、SeaTable、维格表 Vika、飞书多维表格、黑帕云、织信 Informat、语雀
Open3d mesh (surface) coloring
XML parsing
Design of music box based on assembly language
Is investment and finance suitable for girls? What financial products can girls buy?
12.(地图数据篇)cesium城市建筑物贴图
[calculation of loss in yolov3]
Wireless WiFi learning 8-channel transmitting remote control module
What is digital existence? Digital transformation starts with digital existence
谜语1
【使用TensorRT通过ONNX部署Pytorch项目】
Redis集群(主从)脑裂及解决方案
vscode快捷键
splunk配置163邮箱告警
Which domestic cloud management platform manufacturer is good in 2022? Why?
[cloud native | kubernetes] actual battle of ingress case (13)