向原生安卓程序中添加flutter步骤和错误集锦

程序员文章站 2022-05-29 18:37:31

...

目标:在原生安卓程序中点击按钮,跳转flutter页面

主要写给没有做过安卓程序开发的我们

准备阶段:

1.错误:无法添加已存在的flutter到原生安卓项目中

解决:不能使用已存在的flutter,要重新new 新的flutter module作为原生安卓程序的一部分,因为flutter是要做成类似是安卓页面的一个按钮的感觉.

相关的教程简书上好多,大概就是:

①settings.gradle文件中添加代码如下:

setBinding(new Binding([gradle: this]))                                
evaluate(new File(                                                      
        settingsDir.parentFile,                                              
        'flutter_module_native_android/.android/include_flutter.groovy' 
            //这里的flutter_module_native_android是我的flutter module的名字,
            //请读者用的时候一定改成自己的flutter module名字
            //ps:flutter module要和你的安卓原生项目处于同一个根目下的不同文件包
))

②build.gradle(Module:native_android.app)文件中添加依赖

向原生安卓程序中添加flutter步骤和错误集锦

完整的build.gradle(Module:native_android.app)文件代码如下:

plugins {
    id 'com.android.application'
}

android {
    compileSdkVersion 31
    buildToolsVersion '30.0.3'

    defaultConfig {
        applicationId "com.example.native_android"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

    //在这里
    implementation project(':flutter')
}

添加阶段:

2.原生项目AndroidManifest.xml添加活动报错: Cannot resolve symbol '@style/LaunchTheme'

按照官方的步骤一,要在AndroidManifest.xml中添加如下代码:

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme" //这一句报错了
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

解决: 将LaunchTheme换成别的主题,比如说Theme.Design.Light,更多主题见参考链接2.

3.添加button报错/不能使用

解决:在activity_main.xml中添加button, 关键代码如下:

 <Button
        android:id="@+id/myButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="跳转flutter页面"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="143dp"
        tools:layout_editor_absoluteY="132dp" />

完整代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        />

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="跳转flutter页面"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="143dp"
        tools:layout_editor_absoluteY="132dp" />


</androidx.constraintlayout.widget.ConstraintLayout>

4. button不起效

解决:在MainActivity.java的onCreate函数中添加如下关键代码:

   myButton = (Button) findViewById(R.id.myButton);
        myButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(
                        FlutterActivity
                                .withNewEngine()
                                .initialRoute("/")
                                .build(MainActivity.this)
                );
            }
        });

完整代码:

package com.example.native_android;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.view.View;
import android.widget.Button;
import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends AppCompatActivity {
    private Button myButton;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myButton = (Button) findViewById(R.id.myButton);
        myButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(
                        FlutterActivity
                                .withNewEngine()
                                .initialRoute("/")
                                .build(MainActivity.this)
                );
            }
        });
    }
    
}

整理了完整的学习步骤视频:

将flutter页面导入安卓原生项目

参考链接:

1. https://flutter.dev/docs/development/add-to-app/android/add-flutter-screen

2. https://blog.csdn.net/geduo_83/article/details/86561559

3. https://flutter.cn/docs/development/add-to-app/android/add-flutter-screen

4. https://www.youtube.com/watch?v=bgIUdb-7Rqo

5. https://flutter.dev/docs/development/add-to-app/android/add-flutter-screen