Morioh
Login
Archie Mistry

Archie Mistry

4 years ago

Flutter himself commonly used scaffolding

Scaffolding introduction

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.

Folder structure

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 ## 入口文件

Software screenshot

Basic style

   

Get started quickly

Create project

Clone this scaffolding project and make sure you have a git node environment on your computer.

// 新建非中文目录文件夹
https://github.com/xu-chao/flutter_scaffold.git

Startup project

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

Bale

Package using native flutter instructions

Features

Startup screen

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

Get global context

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

dio requests the underlying package to use

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 parameter

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
  }
}

Update APP version components

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

Global theme change

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

Gray mode

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

Global route monitoring

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 > [],
      ),
      // ...
    );
  }
}

Download Details:

Author: xu-chao

Source Code: https://github.com/xu-chao/flutter-scaffold

#flutter #dart #mobile-apps

Flutter himself commonly used scaffolding
3.30 GEEK