Flutter Mudule accede al nativo de Android `` 2020 Big Front-end Hybrid Development ''

I. Introducción

• En 2020, flutter ya no es una nueva tecnología. Las principales aplicaciones, lideradas por 'Xianyu', están adoptando flutter. En la actualidad, lo más ideal es usar flutter para desarrollarse por completo, pero dado que sus respectivas aplicaciones tienen forma, el código anterior está completamente abandonado. Flutter, tanto los recursos humanos como los materiales no son realistas, por lo que el pensamiento actual de la mayoría de los productos es llevar a cabo un desarrollo mixto y aletear gradualmente
• Dado que las principales aplicaciones involucradas revolotean antes y la tecnología utilizada es demasiado antigua, en vista de esto, combiné los últimos documentos oficiales de Google y el resumen en línea para buscar un conjunto de soluciones prácticas para su referencia.

2. Preparación

• Dado que es un desarrollo mixto, primero se requieren dos proyectos: un proyecto de Android y un proyecto de flutter

2.1 Proyecto de Android abierto

• Android Studio directamente nuevo o abierto el existente, sin requisitos especiales
  

2.2 Nuevo proyecto de flutter

• Hay dos situaciones en el proyecto Flutter:
  • El proyecto flutter ya existe, importar y usar directamente
  • Nuevo proyecto puro, simplemente cree un nuevo tipo de módulo directamente

2.2.1 Proyecto de flutter existente

• Solo ábrelo directamente
• Ingrese a la Terminal (el sistema Mac es: presione command + shirft + p al mismo tiempo para abrir)
  

2.2.2 Necesidad de crear un nuevo proyecto de flutter

• Si aún no tienes un proyecto de Flutter y necesitas crear uno nuevo, selecciona Android Studio para continuar:
• Abra Android Studio y seleccione nuevo-nuevo módulo en el archivo
  
• Simplemente ingrese el nombre para crear uno nuevo, no hay configuración especial
• Después de crear uno nuevo, puede sincronizar
  

Tres, acceso

• Herencia de acceso Como se mencionó anteriormente, el sub-acceso ya existe un proyecto de flutter y un módulo de acceso
• Antes de esto, primero debemos configurar el proyecto de Android

3.1 configuración pública del proyecto Android

• Proceder de la siguiente

3.1.1 Configurar ndk

android {
    
    
  //...
  defaultConfig {
    
    
    ndk {
    
    
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }
}

• La ubicación es la siguiente
  

3.1.2 Configurar Java 8

• Configure Java 8 en build.gradle, la nueva versión se ha configurado de forma predeterminada

android {
    
    
  //...
  compileOptions {
    
    
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
}

• La ruta de configuración es la siguiente:
  

3.2 Acceder al módulo Flutter

• Hay dos situaciones en el antiguo proyecto Flutter:
  • Proyecto de flutter existente
  • El proyecto flutter recién creado como módulo
• Permítanme hablar sobre el método de acceso del proyecto flutter que se acaba de crear en forma de módulo.

3.2.1 Acceso al módulo Flutter de Android

• Use Terminal cd para presionar directamente arr debajo del módulo
  
• Siga las indicaciones para modificar build.gradle

  1. Open <host>/app/build.gradle
  2. Ensure you have the repositories configured, otherwise add them:

      repositories {
    
    
        maven {
    
    
            url '/Users/huangyuanhao/StudioProjects/flutter_module/build/host/outputs/repo'
        }
        maven {
    
    
            url 'http://download.flutter.io'
        }
      }

  3. Make the host app depend on the Flutter module:

    dependencies {
    
    
      debugImplementation 'com.superpentagon.fluttermodule:flutter_debug:1.0
      profileImplementation 'com.superpentagon.fluttermodule:flutter_profile:1.0
      releaseImplementation 'com.superpentagon.fluttermodule:flutter_release:1.0
    }


  4. Add the `profile` build type:

    android {
    
    
      buildTypes {
    
    
        profile {
    
    
          initWith debug
        }
      }
    }

• Después de la modificación de la siguiente manera:
  
• ⚠️ Nota: parte del contenido debe modificarse
• Obtenga la ruta del repositorio y reemplácela con la ruta del repositorio de su propia máquina
• Para reemplazar el espejo doméstico, aquí uso el espejo Tsinghua, si falla, vaya aquí para elegir: adquisición de espejo comunitario flutter

    maven {
    
    
        url 'https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io'
    }

• modificar como se muestra a continuación
  
• Finalmente, reemplácelo con el nombre de su paquete local aquí.
  

3.2.2 Prueba de funcionamiento

• Llame a Flutter en MainActivity. Para algunos códigos de herramientas, consulte: Super-Pentagon-p01_android_proj

        // 初始化 Flutter
        FlutterMain.Settings settings=new FlutterMain.Settings();
        settings.setLogTag("MyFlutter");
        FlutterMain.startInitialization(this,settings);
        String[] args = {
    
    "info", "data"};
        FlutterMain.ensureInitializationComplete(this,args);

        // 初始化 FlutterEngine.
        FlutterEngine flutterEngine = new FlutterEngine(this);
        // Configure an initial route.
        flutterEngine.getNavigationChannel().setInitialRoute(FlutterEngineUtils.Home.HOME_PAGE_ROUTE + "?{\"message\":\"StephenCurry\"}");
        // Start executing Dart code to pre-warm the FlutterEngine.
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        // Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.
        FlutterEngineCache
                .getInstance()
                .put(FlutterEngineUtils.Home.HOME_PAGE_ROUTE, flutterEngine);


        FlutterOperationUtil.init().initFragmentById(FlutterEngineUtils.Home.HOME_PAGE_ROUTE).initLayoutId(R.id.main_container).startFlutterTransation(getSupportFragmentManager());

• El diseño es el siguiente

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <FrameLayout
            android:id="@+id/main_container"
            android:visibility="visible"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

</LinearLayout>

• Los detalles son los siguientes:
  
• Debido a demasiado código de diseño, algunas herramientas se detallan en: Super-Pentagon-p01_android_proj

3.2.3 prueba de funcionamiento perfecta

• Funciona perfectamente
  

Cuatro, resumen

• Al leer aquí, algunos lectores definitivamente encontrarán un problema: algunos proyectos pueden haber estado involucrados en Flutter durante mucho tiempo, por lo que es difícil usar aquí y luego usar el Módulo para acceder
• Esta es la solución para empaquetar arr. De hecho, el método de empaque es muy simple, pero debido a limitaciones de espacio, no lo expandiré aquí.
• Daré una introducción detallada en el próximo artículo, invitamos a todos a que presten atención a _yuanhao CSDN para recibir más publicaciones de blog de alta calidad a tiempo.