1. Create an Android project

For example, the project name MyApplication

2. To createFlutter Module

Run the command from CD to current project:

E:\MyApplication
flutter create -t module my_flutter
Copy the code

3. Add configuration code

Add configuration to project setttings. Gradle:

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(settingsDir, 'my_flutter/.android/include_flutter.groovy'))
Copy the code

Add a dependency to build.gradle in your app:

implementation project(':flutter')
Copy the code

Error may occur:

Error: Invoke-customs are only supported starting with Android O (--min-api 26)
Copy the code

Under the Android TAB of your app build.gradle add:

compileOptions{
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
}
Copy the code

The resulting directory structure:

How to create a UI for Flutter in the Android project

4.AndroidCreated in theFlutter UI

Flutter provides two methods to introduce a Flutter, one is a View and the other is a Fragment.

public class FlutterActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);

        FlutterView view = Flutter.createView(this, getLifecycle(), "new_page"); FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams( FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT ); addContentView(view, layoutParams); }}Copy the code

The second parameter is Lifecycle object and the third parameter is route, which can be obtained from the Flutter side via window.defaultroutename

Dart = list.dart = list.dart = list.dart = list.dart = list.dart = list.dart = list.dart = list.dart = list.dart

import 'package:flutter/material.dart';

class ListViewTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget divider1 = Divider(color: Colors.blue);
    Widget divider2 = Divider(color: Colors.green);

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text('ListTest'),
      ),
      body: Center(
        child: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text("$index")); }, separatorBuilder: (BuildContext context, int index) {returnindex % 2 == 0 ? divider1 : divider2; }, itemCount: 100), ), ); }}Copy the code

Dart leads from new_page in main.dart:

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "new_page": (context) => ListViewTest(), }, ); }}Copy the code

5.hot reload

Enter the flutter Module directory and execute the flutter attach command. In this command window, press r to hot reload:

E:\MyApplication\my_flutter
λ flutter attach
Waiting for a connection from Flutter on vivo x27...
Done.
Syncing files to device vivo x27...                             1,125ms

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on vivo 1819 is available at: http://127.0.0.1:55515/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".


Initializing hot reload...
Reloaded 2 of 433 libraries in 969ms.
Copy the code

6. Summary

Finally, compare the Release package size of the Flutter with that of the Android project without the Flutter inheritance:

After adding Flutter, the package size increases by 5M, mainly due to the so library Flutter. Flutter_assets are assets generated by the Flutter project, Isolate_snapshot_data, isolate_SNAPshot_instr, vm_SNAPshot_data, and vm_SNAPshot_instr are platform-specific data and instructions.

Refs:

Android project access Flutter Module

Detailed description of Flutter access to existing apps

Flutter(Android Hybrid Development)

How to conduct Flutter hybrid development

Two modes of Flutter compilation