Flutter have to look at mixed-use development with Android

I remember when flutter just came out, I began to learn flutter. But then despise flutter complex combination of level and not to the stable version, so at that time to give an in-depth study, now with the vigorous development flutter and bigwigs of pushing, and again into the pit flutter.
Flutter have to look at mixed-use development with Android
Although the flutter can be cross-platform, but now almost all existing projects, it is not possible to develop a flutter heavy head, so now almost all use of native + flutter hybrid development program. Then the program how to achieve Nigeria?
1, the module introduced flutter
first switch to the root directory of a native program. In the author's project as an example, the path is D: \ FlutterHybrid \ FlutterHybridAndroid, then the command cd ../ switch to the parent directory. And then execute the following command to create a flutter module.

    flutter create -t module flutter_module

Flutter_module that flutter above the module name we created.

When flutter module is successfully created, we need to import the module using the following steps.

1. First, add the following code in settings.gradle file.

    setBinding(new Binding([gradle:this]))
    evaluate(new File(
            settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy'
    ))

After completion, it is possible to see the flutter module, as shown In Android Studio.
Flutter have to look at mixed-use development with Android
2. Next, after the module flutter can be displayed correctly, we need implementation project: the import module ( 'flutter'). Added successfully started after compiling the project, this time may encounter the following error.
Flutter have to look at mixed-use development with Android
This is minSdkVersion we need to note that, native project can not be less than minSdkVersion Flutter module. The solution is the value of native minSdkVersion project is modified to a value greater than the flutter module minSdkVersion.
After the two steps above, native project is successfully imported a flutter module, this time since you can run native programs. And yet the following error may occur when running native programs.
Flutter have to look at mixed-use development with Android

The problem how to solve Nigeria? In fact, in the bottom of the figure has been given solution, that is native projects must use Java 8, or else not to run. So we need to add the following code build.gradle file in the app directory.

    android {
        compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
        }
    }

Then continue to run native project, this time will be able to run up on the device, but how to verify that flutter modules packaged into apk Rini? This time it can make use of Android Studio apk analysis tools. The tool can be found by apk package consists of the following.
Flutter have to look at mixed-use development with Android
Flutter_assets which is stored flutter code native to this project is the successful introduction of a flutter module.

Note: If using AndroidX in fruit project will lead to very serious compatibility issues. So if the project uses AndroidX, will have to be careful to import flutter module. If we want to import, you can go to read solutions --AndroidX compatibility flutter official offer.

2, native load flutter project page
after some previous operation, we are in the Native project success depends on the flutter module, then the following pages to learn how to load flutter in the Native project. Flutter can be found by looking at the code module, the module provides two ways to load flutter page.

1. The page constructed flutter View, displayed by addView flutter page
2. Page flutter constructed Fragment, through the operation of the fragment to display the page flutter

2.1, page builder will flutter to View
in the class Flutter flutter module provides a method --createView to us. By this method, we can build into a flutter page View. View related operations and presumably for Android developers are not familiar with, so I will add pages flutter to the appropriate place by addView. Codes are as follows:

    public void onLoadFlutter(View view) {
        View flutterView = Flutter.createView(this, getLifecycle(), "route1");
        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 600);
        layoutParams.topMargin = 100;
        addContentView(flutterView, layoutParams);
    }

2.2, the flutter page fragment constructed
Similarly, flutter module also provides a method --createFragment, by which the page will be constructed as a fragment flutter, flutter and then add a page to the appropriate place according to the operation of the fragment. Codes are as follows:

    public void onLoadFlutter(View view) {
       FragmentTransaction transaction= getSupportFragmentManager().beginTransaction();
       transaction.replace(R.id.someContainer,Flutter.createFragment("这里是flutter页面"));
       transaction.commit();
    }

2.3, flutter page
in front page tells how to load flutter in the native project, the following look at the code flutter of the page. The code also makes a very simple, basic module are automatically generated when the code is created.

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(MyApp(
      initParams: window.defaultRouteName,
    ));

class MyApp extends StatelessWidget {
  final String initParams;

  MyApp({Key key, @required this.initParams}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: 'Flutter Demo Home Page',
        initParams: initParams,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String initParams;

  MyHomePage({Key key, this.title, this.initParams}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState(initParams);
}

class _MyHomePageState extends State<MyHomePage> {
  final String initParams;

  _MyHomePageState(this.initParams);

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'initParams:$initParams',
              style: TextStyle(color: Colors.red),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Can be found in the above code, we pass a initialization property, which is actually a route name, but in fact we have passed, or other types of data a json, so do some other operations. In fact, this can be seen as a communication between the native and flutter.
3, flutter module debugging
3.1, the thermal overload flutter block
after one flutter advantage in the development process is able to achieve rapid commissioning by thermal overload function, but by running the above code will find, flutter module code changes can not take effect immediately, you need to repack Native to take effect. So let the flutter of a failure of a major advantage, reducing the debugging efficiency. So we can not do flutter module in a hybrid project in Nepal thermal overload? In fact, it is also possible, but need to go through some steps.
1. First, close the current application, note: to kill the current process where the application instead of exiting the application.

2. Secondly, in the attach flutter flutter input command module, displays the following

Flutter have to look at mixed-use development with Android

3. Finally, open the application again, there will be the following.
Please note that this passage figure

Guess you like

Origin blog.51cto.com/14295695/2410072