I have learned Flutte for a period of time, and I want to have a practical operation in the project. However, flutter is still not that mature at present, and there are still many technical holes to be filled. In addition, my colleagues are also in the state of learning.Copy the code

The existing project is the same as the new project. Just create a new project with AndroidStudio for both the native and Flutter tools.

Create a Flutter Module project 3. 4. Modify the code to implement a simple jumpCopy the code

1. Create an Android project

Open Android Studio, create a normal Android project, go Next, then Finish, and go to the screen below

2. Create a Flutter Module project

Select File-> New-> New Flutter Project and select Flutter Module, the directory should be anywhere. I put it on the same level as the Android project, all the way to Next.

3. Add module dependencies

To add a flutter Module dependency, right-click the app to open the Module Settings, click the plus sign, select import Flutter Module, and select the flutter Module you just created. Note: Don’t forget to synchronize the Project in File->Sync Project With Gradle Files

The project structure after synchronization

4. Modify the code to simply realize the native jump to flutter

MainActiviy serves as the host Activity. Create a MainFragment and jump from MainFragment to FlutterFragment

*. MainActivity is as follows

<android.support.constraint.ConstraintLayout                                                    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
----------------------------------------------------------
 public class MainActivity extends AppCompatActivity {

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

        getSupportFragmentManager().beginTransaction()
                .replace(R.id.container, new MainFragment())
                .commit();
    }
Copy the code

}

*. MainFragment as follows

<android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="? actionBarSize" android:background="@color/colorPrimary" app:title="@string/app_name" app:titleTextColor="@android:color/white" /> <TextView android:id="@+id/tv_go_flutter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center_horizontal" android:layout_marginTop="64dp" android:background="@color/colorPrimary" android:paddingLeft="24dp" android:paddingTop="16dp" android:paddingRight="24dp" android:paddingBottom="16dp" android:text="Go Flutter" android:textColor="@android:color/white" /> </LinearLayout> ---------------------------------------------------- public class MainFragment extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); rootView.findViewById(R.id.tv_go_flutter).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { getActivity().getSupportFragmentManager().beginTransaction() .add(R.id.container, Flutter.createFragment("/")) .addToBackStack("flutter") .commit(); }}); return rootView; }}Copy the code

There’s only one button on the native end

Click the button, the jump effect is as follows:

Done.

Summary: The above is just the implementation of Android native integration with Flutter, as well as a simple jump. There are still many problems, such as the theme color of the two ends needs to be uniform, the backward button display of the Flutter Appbar, jump to the page specified by the Flutter according to the Route, etc. There are many pits to go through in specific use.








Resources: Official documentation