An overview of the

Componentization is also called modularization, which is to divide a large App into multiple independent components or modules based on the separation of concerns for the purpose of reuse. Each individual component is a separate App that can be maintained, upgraded or even directly replaced.

The principle of SOLD

  1. Single function (SRP) : Objects should have only one single function
  2. Open closed Principle (OCP) : Programs should be open for extension, but closed for modification
  3. Richter substitution (LSP) : An object in a program should be able to be replaced by its subclasses without changing the correctness of the program
  4. Interface Isolation (ISP) : Multiple specific client interfaces are better than one general-purpose interface
  5. Dependency inversion (DIP) : A method should comply with “dependency on abstraction rather than an instance”

Address maintainability and code reuse in projects

maintainability

Function modification is risky and dependent

Code reusability

The same functionality is copied in different projects, and the presentation and interaction logic is inconsistent due to later iterations

plan

Flutter package

Each service or function is created as a package

flutter create -t package --org com.example.flutter _network
Copy the code

Dart: network-dart:

library network;



/// A Calculator.

class Calculator {

 /// Returns [value] plus 1.

 int addOne(int value) => value + 1;

}
Copy the code

All functionality is implemented based on Dart and files are stored in the lib directory.

If you need an App project for testing, in the component project root directory, create a test App project:

flutter create example
Copy the code

To introduce components in your App, in Pubspec.yaml:

dependencies: flutter: sdk: flutter network: path: .. /Copy the code

Then import where needed:

import 'package:network/etwork.dart';
Copy the code

To sum up, the scheme based on Flutter Package:

Advantages:

1. Simple integration, the same as using third-party libraries

2, development and compilation efficiency is fast, no need to compile the whole business App

Disadvantages:

1. Need to maintain component version and code repository separately (Melos can be used, single repository management)

2. The import path of resource files is different. When embedded in business App, the path is preceded by packages/ component names.

Flutter module

Integrate Flutter with iOS or Android native projects.

flutter create --template module my_flutter
Copy the code

Ios and android are automatically generated and will be regenerated at each build.

Flutter plugin

Interaction diagrams:

The flutter cret-t plugin --org com.ibaibu.flutter crm_network CD crm_network # -- Platforms ios. # Add support for Android flutter create -t plugin -- Platforms AndroidCopy the code
  1. ios/Classes/: Implements iOS platform functions
  2. android/src/main/java/com/example/network/: Implements functions of the Android platform
  3. libDart layer implementation
  4. example: built-in sample project

pubspec.yaml

Name: crm_network description: A new flutter plugin project. Version: 0.0.1 homepage: environment: SDK: ">=2.12.0 <3.0.0" flutter: ">=1.20.0" dependencies: flutter: SDK: flutter_test: SDK: flutter flutter: plugin: platforms: ios: pluginClass: NetworkPlugin android: package: com.example.network pluginClass: NetworkPluginCopy the code

lib/network.dart

import 'dart:async';



import 'package:flutter/services.dart';



class Network {

 static const MethodChannel _channel =

   const MethodChannel('crm_network');

 static Future<String?> get platformVersion async {

  final String? version = await _channel.invokeMethod('getPlatformVersion');

  return version;

 }

}
Copy the code

Component communication

  • Callback

  • Notification

class CustomNotification extends Notification { CustomNotification(this.msg); final String msg; } class CustomChild extends StatelessWidget { @override Widget build(BuildContext context) { return RaisedButton( OnPressed: () => CustomNotification("Hi").dispatch(context), child: Text("Fire Notification"),); }} class _MyHomePageState extends State<MyHomePage> {String _msg = "homepage: "; @override Widget build(BuildContext context) { return NotificationListener<CustomNotification>( onNotification: (notification) { setState(() {_msg += notification.msg+" "; }); / / notified child widgets, update MSG}, child: the Column (mainAxisAlignment: mainAxisAlignment center, the children: <Widget>[Text(_msg),CustomChild()],// Add child widgets to view tree)); }}Copy the code

page

  • Dart Stream

/ / launch this. Emit (" Event "); // Subscribe this.subscribe('Event', (Event){});Copy the code