Basic environment version
• Flutter version 1.17.0
• Dart version 2.8.1
• node 10+
Built-in integrated functions:
1. State management: Integrated Provider In the Flutter project, any page declares the store, and it can be used by injecting it into the lib/providers_config.dart file.
2. The page component can receive routing alias jump parameters more conveniently, and the bottom layer has been processed without any plug-in support! Easy to use, no learning cost.
3. The page routing jump fault-tolerant processing, the routing jump error is not declared, and the jump to the error page is specified. Let you find low-level error bugs the first time, and the friendly prompt page is clear and clear.
4. One-click color change for the built-in global theme, you only need to configure your theme color and call the method.
5. The built-in global floating debugging component allows you to easily obtain error capture on the real machine.
This is the structure that will always be used in the project
lib/
|- components/ ## 共用widget组件封装
|- config/ ## 全局的配置参数
|- ioc/ ## git_it的IOC容器文件
|- provider/ ## 全局状态管理
|- pages/ ## 页面ui层,每个独立完整的页面
|- AppHomePage/ ## APP主体页面
|- SplashPage/ ## APP进入时广告页面、欢迎页
|- service/ ## 请求接口抽离层
|- routes/ ## 定义路由相关文件夹
|- utils/ ## 公共方法抽离
|- dio/ ## dio底层请求封装safeRequest
|- main.dart ## 入口文件
Basic style
Clone this scaffolding project and make sure you have a git node environment on your computer.
// 新建非中文目录文件夹
https://github.com/xu-chao/flutter_scaffold.git
Enter the project directory folder, initialize the installation dependency package and enable the APP (remember to open your simulator)
Enter the following command:
// 获取flutter依赖
flutter pub get
// 启动flutter应用
flutter run
Package using native flutter instructions
Modify the startup screen picture to the specified path and replace it with your own picture
// 这是安卓启动屏图片路径,默认只添加了一个文件加,需要不同分别率在mipmap-**相应文件夹内添加
android\app\src\main\res\mipmap\splash_bg.png
// 这是IOS启动屏图片路径,LaunchImage**.png都替换成自己的启动屏图片
ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png
PS: The splash screen welcome page and advertisement page are customized in the flutter component and modified in the lib\pages\SplashPage directory
The global key and global context are injected and stored in the IOC container, and the IOC container implementation uses get_it.
Use method Import the ioc/locator.dart container instance file, and directly use the class method you have injected before.
PS: You can inject some global classes into the IOC container for use, so that the page is more concise, and there is no need to import more imports in a certain component or page
Import 'Package: flexible / IOC / locator.dart' Show Locator, CommonService; // instances into the container
CommonService _commonIoc = Locator. GET < CommonService > (); // Get the specified method IOC containers
_commonIoc.getGlobalContext; // global context Object
The requested component dio has been removed and can be used directly
Import 'Package: flexible / utils / dio / safeRequest.dart' ;
// GET request to use the same request dio assembly method
getHomeData () the async {
the Map ResData = the await SafeRequest (
'HTTP: // URL' ,
queryParameters : { 'version' : version},
options : Options (method : 'GET' ),
);
}
// post request
getHomeData () async {
Map resData = await safeRequest (
'http://url' ,
data : { 'version' : version}, // pass parameters
options : Options (method : 'POST' ),
);
}
Alias routing passes parameters, which is more convenient and useful in the receiving process.
1. Enter the routing configuration file routes/routesData.dart and add alias parameter transfer support.
// routesData.dart file
Import 'Package: Flutter / material.dart' ;
Import '../pages/ErrorPage/ErrorPage.dart' ;
Import '../pages/TestDemo/TestDemo.dart' ;
final Map < String , WidgetBuilder > routesData = {
// Route/testDemo Add alias routing parameter support.
'/testDemo' : ( BuildContext context, {params}) => TestDemo (params : params),
// error routing does not add alias parameter transfer function,
'/error' : ( BuildContext context, {params}) => ErrorPage ( ),
};
2. Use alias jump in the page, just use the native alias jump method directly
// Jump to a page
Navigator . PushNamed (
context,
'/testDemo' ,
arguments : { 'data' : 'hello world' }, // pass parameters
);
3. Just read the params parameter variable directly on the received subpage.
// Sub-page components use and receive
class testDemo extends StatefulWidget {
testDemo ({ Key key, this .params)) : super (key : key);
final params; // Alias pass parameters to receive variables
@override
_testDemoState createState () => _testDemoState ();
}
class _testDemoState extends State < testDemo > {
@override
void initState () {
super . initState ();
print (widget.params); // Route alias parameters
}
}
1. Add Android storage permission application label (added by default, you can skip this step), if you delete the generated Android directory, please add it yourself.
Android permission configuration file android\app\src\main\AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.flutter_flexible">
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application>...其它配置忽略</application>
</manifest>
2. In the lib\components\UpdateAppVersion\getNewAppVer.dart file, the getNewAppVer method runs directly to update the APP version, but some of them need to be implemented by themselves. The TODO location has been marked, the APP download address is specified, and the interface to obtain the new version is replaced.
// TODO: Replace with your own interface to obtain the new version of the APP
Map resData = await getNewVersion ();
// The simulation parameter structure is as follows {"code":"0","message":"success","data":{ "version":"1.1.0","info":["fix bugs to improve performance","add interesting feature pages for easter eggs","test features"]}}
UpdateAppVersion (
// TODO: Pass in the relevant parameters of the new version of APP, version number, update content, download address, etc.
version : resData[ 'version' ] ?? '' , // version number
info : (resData[ 'info' ] as List ). cast < String > () ?? [], // Introduction to the update content
// ios is the Apple App Store address
iosUrl : 'itms-apps://itunes.apple.com/cn/app/id414478124?mt= 8' ,
// Android APK download address
androidUrl : 'https : //www.jonhuu.com/download/aweme.apk ' ,
),
)
3. Run the APP version check function on the specified page. The default is in lib\pages\AppHomePage\AppHomePage.dart. Run the check and update APP function. You can specify another location to run and check the new version.
Import 'Package: flexible / Components / UpdateAppVersion / UpdateAppVersion.dart' Show getNewAppVer;
getNewAppVer (); // Perform update check on the specified component page
Put your theme configuration parameter file into the lib\config\themes folder, and then part to the index_theme.dart file for unified management, in addition to the gray mode.
The content of the case is as follows:
Import 'Package Penalty for: Flutter / material.dart' ;
// you configure the following global theme color parameters
Part 'themeBlueGrey.dart' ;
Part 'themeLightBlue.dart' ;
Part 'themePink.dart' ;
For specific theme color matching, please refer to the color matching file themeBlueGrey.dart.
Call the following in the page that needs to replace the theme:
Import 'Package: flexible / config / Themes / index_theme.dart' Show themeBlueGrey; // Topic
Import 'Package: flexible / Provider / themeStore.p.dart' ; // global state management relating
ThemeStore _theme = Provider . of < ThemeStore > (context);
_theme. setTheme (themeBlueGrey); // Replace the theme and inject the theme configuration
The grayscale mode of the homepage does not require a separate configuration of the theme file. The usage is as follows:
Import 'Package: flexible / Pages / AppHomePage / Provider / appHomePageStore.p.dart' ;
AppHomePageStore appHomePageStore = Provider . of < AppHomePageStore > (context);
appHomePageStore. setGrayTheme ( true ); // Set gray mode
By default, the global routing page is monitored, and you only need to add your third-party statistics buried points. If you need a tab monitoring on a page, you also need to manually inherit the class and implement related methods.
The specific implementation is completed by the ana_page_loop plug-in, detailed plug-in documentation “” https://github.com/tec8297729/ana_page_loop
1. First find the following file lib\utils\myAppSetup\anaPageLoopInit.dart, configure the third-party statistical method, if you want to specify the route not to monitor processing events, just write the relevant route name.
// Find the following file lib\utils\myAppSetup\anaPageLoopInit.dart
void anaPageLoopInit () {
anaPageLoop. init (
beginPageFn : (name) {
// TODO: start of third-party statistics
},
endPageFn : (name) {
// TODO: End of third-party buried point statistics
},
routeRegExp : [ '/appHomePage' ], // filter route
debug : false ,
);
}
If your project is very simple, at this time you have completed the global burying process, you only need to add a third-party burying method.
If you need to independently count the pages in the PageView or Tab component, proceed to the second step.
2. First, two mixin inheritance classes are provided for use on pages that you need independent statistics, and remember to filter out the current independent statistics page routing. For example, the /home page has four separate statistics pages, so you need to filter the overall/ home routing.
PageViewListenerMixin类:用于监听类PageView组件
TabViewListenerMixin类:用于监听类TabBar组件
The demonstration used in PageView component is as follows:
// The current routing page name is /appHomePage
class _AppHomePageState extends State < AppHomePage > with PageViewListenerMixin {
PageController pageController;
@override
void initState () {
super . initState ();
pageController = PageController ();
}
@override
void dispose () {
PageController ? . the Dispose ();
Super . the Dispose ();
}
// Implement the method on the PageViewListenerMixin class
@override
PageViewMixinData initPageViewListener () {
return PageViewMixinData (
controller : pageController, // Pass PageController
tabsData : [ 'Home' , 'Category' , 'Shopping Cart' , 'My Center' ], // Customize the name of each page record
);
}
// Call the following life cycles
@override
void didPopNext () {
super . DidPopNext ();
}
@override
void didPop () {
super . didPop ();
}
@override
void didPush () {
super . didPush ();
}
@override
void didPushNext () {
super . didPushNext ();
}
@override
Widget build ( BuildContext context) {
return Scaffold (
body : PageView (
controller : pageController, // controller
children : < Widget > [],
),
// ...
);
}
}
Author: xu-chao
Source Code: https://github.com/xu-chao/flutter-scaffold
#flutter #dart #mobile-apps