Web前端工程师实现Native APP需求，用Flutter做可攻可守的混合开发

app-project
    |----android // Android原生目录
    |    |--gradle
    |    |--build.gradle // Android配置文件
    |    |--key.jks
    |    |--key.properties
    |    |--app
    |        |--libs
    |        |--src
    |        |--profile
    |        |   |--AndroidManifest.xml 
    |        |--main
    |            |--kotlin
    |            |--res
    |            |--AndroidManifest.xml 
    |----ios
    |    |--Gemfile
    |    |--Podfile // ios 的pod 依赖文件
    |    |--Flutter
    |    |--scripts
    |    |   |--AppIcon.sh
    |    |   |--flutterbuild.sh
    |    |   |--setup.sh
    |    |--Runner
    |        |--Info.plist
    |        |--main.m
    |        |--Assets.xcassets
    |        |--Base.lproj
    |        |--AppDelegate.h
    |        |--AppDelegate.m
    |----lib // Flutter 工作区
    |    |--assets // 本地的资源工作区
    |    |--config
    |    |--jsBridge // 提供webview jsbrige
    |    |   |--live
    |    |   |--login
    |    |   |--cache
    |    |--pages  // flutter 页面
    |    |   |--live
    |    |   |--loading
    |    |   |--webViewPage
    |    |   |--login
    |    |--routers
    |    |   |--routers.dart
    |    |--utils
    |    |   |--cache.dart
    |    |   |--color.dart
    |    |   |--network.dart
    |    |   |--events.dart
    |    |--widgets
    |    |   |--routers.dart
    |    |--main.dart // 入口文件
    |----plugins
    |    |--flutter-inappwebview  //webview库
    |    |--flutter-login
    |----test
    |----web
    |----pubspec.yaml // flutter 配置文件

// 页面实现事例
import 'package:flutter/widgets.dart';
class MyAPP extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return const Center(child: Text('Hello Qun'));
  }
}
void main() => runApp(new MyAPP());

// 事件响应
Listener(
  child: Container(
    color: Colors.yellow,// 背景色
    width: 700,
    height: 700,
  ),
  // 手势按下回调
  onPointerDown: (event) => print("down $event"),
  // 手势移动回调
  onPointerMove:  (event) => print("move $event"),
  // 手势抬起回调
  onPointerUp:  (event) => print("up $event")
);

// 基本路由
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      // 打开页面
      onPressed: ()=> Navigator.push(context, MaterialPageRoute(
          builder: (context) => SecondPage()
      ));
    );
  }
}
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      // 回退页面
      onPressed: ()=> Navigator.pop(context)
    );
  }
}

// 命名路由
MaterialApp(
    ...
    // 注册路由
    routes:{
      "uri_page":(context)=>UriPage(),
    },
);
// 使用名字打开页面
Navigator.pushNamed(context,"uri_page");

// 版本配置，iOS最终是以identify中的版本配置为准
version: 1.0.30+1
// flutter sdk环境配置
environment:
  sdk: ">=2.12.0-0 <3.0.0"
  flutter: ">=1.22.2"
// 依赖配置  
dependencies:
  flutter:
    sdk: flutter
  permission_handler: ^7.1.0
  flutter_inappwebview:
    path: ./plugins/flutter_inappwebview
  joymo_app_upgrade:
    path: ./plugins/joymo_app_upgrade
  tal_login:
    path: ./plugins/tal_login
  student_101_live:
    path: ./plugins/student_101_live
dev_dependencies:
  flutter_test:
    sdk: flutter

// 定义一个 flutter 侧的 名称为"student_101_live"的MethodChannel 
static const MethodChannel _channel =
    const MethodChannel('student_101_live');


// 展示原生端直播UI
static Future<void> showLive(Map<String,dynamic>? map) async {
  
  try{
    // 调用原生方法名为："showLiveDialog"方法
    await _channel.invokeMethod('showLiveDialog',map);
  }on MissingPluginException catch(e){
    print('MissingPluginException, please check plugin has been registered or not,error message:${e.message}');
  }on PlatformException catch(e){
    print('invoke method log---showLiveDialog failed,error message:${e.message}');
  }
}

// 这个plugin类是模版编译生成，继承自FlutterPlugin
@implementation Student101LivePlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
// 定义一个和flutter侧相同名称的"student_101_live" 的FlutterMethodChannel   
FlutterMethodChannel* channel = [FlutterMethodChannel
                                     methodChannelWithName:@"student_101_live"
                                     binaryMessenger:[registrar messenger]];
    
  
    Student101LivePlugin* instance = [[Student101LivePlugin alloc] init];
    // 设置一个对应dart的methodDelegate
    [registrar addMethodCallDelegate:instance channel:channel];
    
}


- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  // 判断是否和flutter侧的方法对应起来  
  if ([@"showLiveDialog" isEqualToString:call.method]) {
        // 这里method delegate的处理，完成原生方法的调用
        if (call.arguments != nil) {
            [self initLiveView:call.arguments];
        }
        result(@"iOS showLiveDialog");
    }else {
        result(FlutterMethodNotImplemented);
    }
}

@implementation GeneratedPluginRegistrant
+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry {
  [Student101LivePlugin registerWithRegistrar:[registry registrarForPlugin:@"Student101LivePlugin"]];
  [FLTURLLauncherPlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTURLLauncherPlugin"]];
}

<activity
    android:name=".MyActivity"
    // 1、配置启动的style
    android:theme="@style/LaunchTheme"
    // ...
    >
    <meta-data
       // 2、配置普通的style，系统会从启动style直接过渡到这个style
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme"
        />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

Flutter clean 


=========执行输出=========
Cleaning Xcode workspace...                                         4.1s
Deleting build...                                                1,116ms
Deleting .dart_tool...                                               6ms
Deleting .packages...                                                0ms
Deleting Generated.xcconfig...                                       1ms
Deleting flutter_export_environment.sh...                            0ms
Deleting .flutter-plugins-dependencies...                            0ms
Deleting .flutter-plugins...                                         0ms

Flutter pub get 


=========部分执行输出=========
Running "flutter pub get" in studentflutter...
executing: [/Users/xx/talworkproject/xx/studentflutter/]
/Users/xx/talworkproject/xx/fluttersdk/bin/cache/dart-sdk/bin/pub --verbose get --no-precompile
FINE: Pub 2.14.4
MSG : Resolving dependencies...
SLVR: fact: app_student_flutter is 1.0.30+1
SLVR: derived: app_student_flutter
SLVR: fact: app_student_flutter depends on flutter any from sdk
SLVR: fact: app_student_flutter depends on permission_handler ^7.1.0
SLVR: fact: app_student_flutter depends on limiting_direction_csx ^0.1.0
SLVR: fact: app_student_flutter depends on url_launcher ^6.0.0-nullsafety.4
SLVR: fact: app_student_flutter depends on package_info ^2.0.0
SLVR: fact: app_student_flutter depends on shared_preferences ^2.0.5
SLVR: fact: app_student_flutter depends on connectivity_plus ^1.0.2
SLVR: fact: app_student_flutter depends on dio ^4.0.0
SLVR: fact: app_student_flutter depends on app_settings ^4.1.0
SLVR: fact: app_student_flutter depends on fluttertoast ^8.0.7

Flutter build apk --release/--debug

Flutter clean
Flutter pub get

Flutter build ipa --release/--debug/--profile

...省略
apply plugin: FlutterPlugin
class FlutterPlugin implements Plugin<Project> {
   // ......
   // 重点入口
    @Override
    void apply(Project project) {
        //......
        project.extensions.create("flutter", FlutterExtension)
        // 重点：添加flutter构建相关的各种task
        this.addFlutterTasks(project)
        //......
        // flutter shell 命令
        String flutterExecutableName = Os.isFamily(Os.FAMILY_WINDOWS) ? "flutter.bat" : "flutter"
        flutterExecutable = Paths.get(flutterRoot.absolutePath, "bin", flutterExecutableName).toFile();
        String flutterProguardRules = Paths.get(flutterRoot.absolutePath, "packages", "flutter_tools",
                "gradle", "flutter_proguard_rules.pro")
        // 给所有的buildtypes 添加依赖 
        project.android.buildTypes.all this.&addFlutterDependencies
    }
 
    /**
     * Adds the dependencies required by the Flutter project.
     * This includes:
     *    1. The embedding
     *    2. libflutter.so
     */
     // 重要，看上面注释就可以看出主要是The embedding和libflutter.so
    void addFlutterDependencies(buildType) {
        String flutterBuildMode = buildModeFor(buildType)
        //.....
        platforms.each { platform ->
            String arch = PLATFORM_ARCH_MAP[platform].replace("-", "_")
            // Add the `libflutter.so` dependency.
            addApiDependencies(project, buildType.name,
                    "io.flutter:${arch}_$flutterBuildMode:$engineVersion")
        }
    }
    //......
    // 重点：整个编译过程中的重点和难点，最终是产出flutter层的产物 app.so和libs.jar,篇幅有限
    private void addFlutterTasks(Project project) {
            //......
            String taskName = toCammelCase(["compile", FLUTTER_BUILD_PREFIX, variant.name])
            FlutterTask compileTask = project.tasks.create(name: taskName, type: FlutterTask) {
                //......
            }
            // 中间产物lib.jar
            File libJar = project.file("${project.buildDir}/${AndroidProject.FD_INTERMEDIATES}/flutter/${variant.name}/libs.jar")
            Task packFlutterAppAotTask = project.tasks.create(name: "packLibs${FLUTTER_BUILD_PREFIX}${variant.name.capitalize()}", type: Jar) {
                destinationDir libJar.parentFile
                archiveName libJar.name
                dependsOn compileTask
                targetPlatforms.each { targetPlatform ->
                    String abi = PLATFORM_ARCH_MAP[targetPlatform]
                    from("${compileTask.intermediateDir}/${abi}") {
                        include "*.so"
                        // Move `app.so` to `lib/<abi>/libapp.so`
                        rename { String filename ->
                            return "lib/${abi}/lib${filename}"
                        }
                    }
                }
            }
 
        if (isFlutterAppProject()) {
            project.android.applicationVariants.all { variant ->
                // assemble task任务,最终走到 Android assemble 任务中
                Task assembleTask = getAssembleTask(variant)
                Task copyFlutterAssetsTask = addFlutterDeps(variant)
                def variantOutput = variant.outputs.first()
                def processResources = variantOutput.hasProperty("processResourcesProvider") ?
                    variantOutput.processResourcesProvider.get() : variantOutput.processResources
                processResources.dependsOn(copyFlutterAssetsTask)
                // Copy the output APKs into a known location, so `flutter run` or `flutter build apk`
                // flutter build apk的归档
                variant.outputs.all { output ->
                    assembleTask.doLast {
                        // .......
                        project.copy {
                            from new File("$outputDirectoryStr/${output.outputFileName}")
                            into new File("${project.buildDir}/outputs/flutter-apk");
                            rename {
                                return "${filename}.apk"
                            }
                        }
                    }
                }
            }
         // ...
        }
        // ...
    }
}