Flutter mixed development of Android terminal

Time:2022-6-28

Recently, because the company needs to introduce flutter into the project and enter the large front-end development, I slowly began to learn the mixed development of flutter, and gradually embedded flutter in the project. I originally developed for Android, so I started from the Android side.

Flutter mixed development of Android terminal

image.png

The following is a step-by-step explanation of embedding fluent in the original Android project:

  • Step 1: create a new shutter module in Android studio (file – > New – > New Module – > shutter module – > next – > next – > finish)

    Flutter mixed development of Android terminal

    image.png

    Flutter mixed development of Android terminal

    image.png
  • Step 2: pubspec Add third-party dependencies to the yaml file, as shown in my code below:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

  #https://pub.flutter-io.cn/packages/webview_flutter
  webview_flutter: ^2.0.10

  #https://github.com/Sky24n/fluintl
  fluintl: ^2.0.0

  #https://github.com/Sky24n/flustars
  flustars: ^2.0.1

  # https://github.com/flutter/plugins/tree/master/packages/url_launcher
  url_launcher: ^6.0.9

  # flutter_ Boost is not compatible with null security, and will not be introduced temporarily
  # https://github.com/alibaba/flutter_boost
#  flutter_boost:
#    git:
#      url: 'https://github.com/alibaba/flutter_boost.git'
#      ref: 'v3.0-preview.9'
  • Step 3: modify main Dart, add a route to enter different pages:
void main(){
  runApp(MyApp(window.defaultRouteName));
}
class MyApp extends StatelessWidget {

  //Get method channel
  static const platform = MethodChannel('com.mjb.kefang/navigation');

  late String mRouteName;

  MyApp(this.mRouteName);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: _MainEntrance(mRouteName),
    );
  }

  Widget _MainEntrance(String defaultRouteName) {
    print(defaultRouteName);
    String route,paramsJson;
    int index = defaultRouteName.indexOf('?');
    if(index == -1){
      route = defaultRouteName;
      paramsJson = '{}';
    }else{
      route = defaultRouteName.substring(0,index);
      paramsJson = defaultRouteName.substring(index + 1);
    }
    Map<String, dynamic> params = json.decode(paramsJson);
    switch (route){
      case 'flutter_web':
        //Enter the customized WebView page 
        return WebScaffold(
          title: params['title'],
          titleId: params['titleId'],
          url: params['url'],
        );
      case 'flutter_main':
      default:
        return MyHomePage(title: 'Flutter Demo Home Page');
    }
  }
}
  • Step 4: create a flutteruiactivity in the original Android project to inherit flutteractivity (remember to register in the manifest file after writing the activity):
public class FlutterUIActivity extends FlutterActivity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FlutterView flutterView = new FlutterView(this);
        //Flutterengine can be obtained from flutteractivity
        FlutterEngine flutterEngine = getFlutterEngine();
        //Enter Baidu's website
        //flutterEngine. getNavigationChannel(). Setinitialroute ("shutter_web? {'title':' Baidu once ','url': ' https://www.baidu.com '}");
        //Go to the flutter home page
        flutterEngine.getNavigationChannel().setInitialRoute("flutter_main");
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        //Key code to display the shutter page in the flutterview
        flutterView.attachToFlutterEngine(flutterEngine);
        //Replace contentview of activity with flutterview
        setContentView(flutterView);
    }
  • Step 5: in the setting Add the following code to the gradle file. This step is to reference the shuttle project (shuttle\u module is your shuttle module name):
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))
include ':flutter_module'
project(':flutter_module').projectDir = new File('../flutter_module')
  • Step 6: in the build Add the following code under gradle:
    debugImplementation project(':flutter')
    profileImplementation project(':flutter')
    releaseImplementation project(':flutter')

Or:

    implementation project(':flutter')

Then you can start compiling the project. If you encounter the problem that flutter fails to compile, you can restart Android studio to try
IOS will be improved in the future

Flutter mixed development of Android terminal

image.png