The background,

As Flutter technology improves and becomes more popular with developers, more and more projects are being developed using Flutter. Just like native development, the appropriate architecture should be chosen before development, MVC, MVP or MVVM. Then build a project framework, encapsulate common base classes and components, HTTP, logging, exception reporting, tool classes…… These are the functions that every project needs, the scaffolding of the project;

Based on the above reasons, the Flutter MVVM base library is encapsulated. Encapsulation is to reduce duplicate code, improve code reuse, and improve development efficiency. The idea of encapsulation comes from actual projects.

Introduction to Flutter Baselib

1. Warehouse address

Gitee.com/rishli/flut…

2. Include modules

1. The Xlog library (only Android saves the log file, other platforms print the log to the console using Flutter print());

2. Bugly anomaly reporting and application update (Bugly will be reported only on Android platform);

3. Dio-based package network request component XApi;

4, encapsulation HTTP general loading, loading error page, blank page and normal display page UI and logic, UI can be customized;

5, encapsulation HTTP general loading dialog control and dialog display hide logic, dialog UI can be customized;

6. Encapsulate BaseViewModel base class and BaseView (MVVM) based on Provider;

7, common tool classes ToastUtils, LogUtils, PermissionUtils, DeviceUtils…… ;

Iii. Usage Guide

1. Git access

Dependencies: flutter_baselib: git: url: https://gitee.com/rishli/flutter_baselib_plugin.git ref: (tag) is modified to the latestCopy the code

2. Initialize

A. Call baselibplugin.init () to initialize each module when the application starts:

Baselibplugin. init(isDebug: true, logConfig: logconfig. obtain(tag: "lixu", isConsolePrintLog: true, isFlutterPrintLog: false, saveLogFilePath: '/ storage/emulated / 0 / flutter_xlog_app xlog/', isLogFileEncrypt: false), / / / configuration httpConfig HTTP: HttpConfigImpl(), /// /bugly related config buglyConfig: BuglyConfig. DefaultAndroid (' 8 b841196c7), / / / toast related configuration toastConfig: toastConfig. Obtain (fontSize: 14, gravity: ToastGravity.BOTTOM, backgroundColor: Colors.black87, textColor: Colors.white, ), );Copy the code

B. Initialize the resConfig configuration: refer to the following code to implement the IResConfig interface according to the service:

///@date: 2021/3/1 14:06 ///@author: lixu ///@description: Global resource configuration class ResConfigImpl implements IResConfig {/// Customize HTTP global blank page @Override Widget configLoadEmptyView() {return LoadEmptyView(); } @override Widget configLoadErrorView() {return LoadErrorView(); } @override Widget configLoadingView() {return LoadingView(); }}Copy the code

3. Use global context

To initialize the global context, see the following code:

return MaterialApp(
    home: HomePage(),
    builder: BaseLibPlugin.oneContextBuilder,
    navigatorKey: BaseLibPlugin.oneContextKey,
);
Copy the code

B, where unable to get the context object by: BaseLibPlugin. Context can get to the context, can be used to display the dialog or routing jump;

4. Use bugly

A, apply the main() method to the exception catch method:

void main() { BaseLibPlugin.postCatchException( () => runApp(App()), onUploadCallback: (String errMsg, errDetail) {/// Call logutils. e('bugly caught exception MSG ', errMsg); Logutils. e('bugly catch exception detail', errDetail); },); }Copy the code

Call baselibplugin.init () to initialize buglyConfig when the application starts:

// initialize bugly baselibplugin.init (... Omit the other code / / / bugly related configuration buglyConfig: buglyConfig. DefaultAndroid (' 8 b841196c7),...). ;Copy the code

C, manual reporting abnormal FlutterBugly. UploadException () :

/// Report custom exception information. Data is a text attachment ///Android error analysis => Trace data => extramessage. TXT //iOS error analysis => trace data =>crash_attach.log static Future<Null> uploadException({ @required String message, @required String detail, Map data, })Copy the code

D, testing update FlutterBugly. CheckUpgrade ();

5. Use the Log tool

A, call baselibplugin.init () to initialize logConfig when the application starts:

Baselibplugin.init (... /// obtain(tag: "lixu", isConsolePrintLog: true, isFlutterPrintLog: false, saveLogFilePath: '/storage/emulated/0/flutter_xlog_app/xlog/', isLogFileEncrypt: false, ), ... ) ;Copy the code

B. Use the LogUtils class to print logs. The Android platform will save log files to the saveLogFilePath path.

6. Use HTTP components

Check out my other article on Flutter Dio encapsulation practices

7. MVVM practice

Check out my other article the Flutter MVVM practice

Four,

1, these functions are relatively simple, but very common, and easy to ignore some details, through encapsulation can make these functions reuse, do not pay attention to these details, focus on business development;

2. The functional modules contained in the base library are only encapsulated according to their own business, which cannot meet all scenarios. However, they can be extended according to specific business scenarios.

3. The functions of the basic library will be improved later to expand universality;