Flutter Android混合开发-页面跳转_app跳转flutter制定界面

Android跳转到Flutter页面

AndroidManifest.xml 注册 FlutterActivity：

<activity
	android:name="io.flutter.embedding.android.FlutterActivity"
	android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
	android:hardwareAccelerated="true"
    android:theme="@style/Theme.AppCompat"
    android:windowSoftInputMode="adjustResize" />
1
2
3
4
5
6

• 最简单的方式：Activity直接继承 FlutterActivity ，打开的就是flutter模块main()运行的代码

public class MainActivity extends FlutterActivity {}
1

• 点击事件跳转到Flutter页面：

 	@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn1:
            	// 注意activity继承的应该是AppCompatActivity
                startActivity(new Intent(MainActivity.this, FlutterActivity.class));
                break;
        }
    }
1
2
3
4
5
6
7
8
9

Android跳转到指定的Flutter页面

通过路由来跳转，需要先声明路由。MeterialApp中声明路由：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: <String, WidgetBuilder>{
        "login": (context) => UserLoginPage(),
        "old_password": (context) => UserUpdatePasswordForOldPage(),
        "code_password": (context) => UserUpdatePasswordForCodePage(),
        "login": (context) => UserLoginPage(),
      },
      home: MyHomePage(title: "Flutter Demo"),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Android部分通过指定路由跳转:

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn2:
                startActivity(FlutterActivity
                        .withNewEngine()
                        .initialRoute("login")
//                        .initialRoute("old_password")
//                        .initialRoute("code_password")
                        .build(MainActivity.this));
                break;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

使用缓存的FlutterEngine（解决跳转Flutter页面的卡顿）

在Application实例化一个FlutterEngine：

public class App extends Application {

    FlutterEngine flutterEngine;// 使用缓存的FlutterEngine

    @Override
    public void onCreate() {
        super.onCreate();
        // 实例化FlutterEngine
        flutterEngine = new FlutterEngine(this);
        // 开始执行Dart代码以预热FlutterEngine
        flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
        // 缓存FlutterActivity要使用的FlutterEngine
        FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine);
    }
    
    @Override
    public void onTerminate() {
        //销毁flutterEngine
        flutterEngine.destroy();
        super.onTerminate();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用：

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn3:
                startActivity(FlutterActivity
                        .withCachedEngine("my_engine_id")
                        .build(MainActivity.this));
                break;
        }
    }
1
2
3
4
5
6
7
8
9
10

使用缓存的FlutterEngine跳转到指定的Flutter页面

在Application中设置好要缓存的页面

public class App extends Application {

    FlutterEngine flutterEngine;// 使用缓存的FlutterEngine

    @Override
    public void onCreate() {
        super.onCreate();
        // 实例化FlutterEngine
        flutterEngine = new FlutterEngine(this);
        // 设置要缓存的页面
        flutterEngine.getNavigationChannel().setInitialRoute("login");
        // 开始执行Dart代码以预热FlutterEngine
        flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
        // 缓存FlutterActivity要使用的FlutterEngine
        FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine);
    }

    @Override
    public void onTerminate() {
        //销毁flutter引擎
        flutterEngine.destroy();
        super.onTerminate();
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

重写FlutterActivity跳转到指定的Flutter页面

Flutter入口文件：

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_module/user_login_page.dart';
import 'package:flutter_module/user_update_password_page_for_code.dart';
import 'package:flutter_module/user_update_password_page_for_old.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: <String, WidgetBuilder>{
        "login": (context) => UserLoginPage(),
        "old_password": (context) => UserUpdatePasswordForOldPage(),
        "code_password": (context) => UserUpdatePasswordForCodePage(),
        "login": (context) => UserLoginPage(),
      },
      // home: MyHomePage(title: "Flutter Demo"),
      home: _widgetForRoute(window.defaultRouteName),//根据传过来的值打开相应页面
    );
  }
}

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'login':
      return Center(
        child: UserLoginPage(),
      );
    case 'old_password':
      return  Center(
          UserUpdatePasswordForOldPage()
      );
    case 'code_password':
      return Center(
          UserUpdatePasswordForCodePage()
      );
    default:
      return Center(
        child: MyHomePage(title: "123456"),
      );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

继承FlutterActivity的类：

public class FlutterAppActivity extends FlutterActivity {

    public final static String INIT_PARAMS = "initParams";
    private String initParams;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initParams = getIntent().getStringExtra(INIT_PARAMS);
    }

    @Override
    public String getInitialRoute() {
        return initParams == null ? super.getInitialRoute() : initParams;
    }

    public static void start(Context context, String initParams) {
        Intent intent = new Intent(context, FlutterAppActivity.class);
        intent.putExtra(INIT_PARAMS, initParams);
        context.startActivity(intent);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用：

	@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn4:
                FlutterAppActivity.start(MainActivity.this, "login");
                break;
        }
    }
1
2
3
4
5
6
7
8