Introduce four Flutter projects

Let’s first introduce the differences between these four and the scenarios used.

Flutter App

If you want to develop a new project using Flutter, choose the Flutter App. Just like wechat_demo

Flutter Module

But many times the native APP we currently have may be too large to just reuse Flutter and write it all over again. But if you want to experience Flutter in an existing APP, select flutter Module

Flutter Package

Flutter supports the use of shared packages that other developers contribute to the Flutter and Dart ecosystem. “, which means you can build applications quickly instead of starting from scratch.

The minimum requirement for the Package is to include a pubspec.yaml file. In addition, a package can contain dependencies (declared in the pubspec.yaml file), Dart libraries, applications, resources, tests, images, examples, and so on. Pub. dev lists many packages, developed and published by Google engineers and developers in the Flutter and Dart communities, that you can use in your own applications.

Flutter Plugin

Plugin is a kind of package. Its full name is Plugin package, which is referred to as plugin in Chinese. A plugin package is a special package, specifically one that helps you get native platform features. Plug-ins can be written for Android (using Kotlin or Java), iOS (Swift or Objective-C), Web, macOS, Windows, Linux, or any combination of the two. For example, a plugin could provide a Flutter application with the ability to use the native platform’s camera.

Mix development using the Flutter Module

The project we developed in the past seven days is the Flutter App. Today, we mainly introduce how to use the Flutter Module for mixed development. The official recommendation for mixed development is to use only a single Flutter page. Multiple Flutter pages can be supported, but there may be stability issues, performance issues, and API changes. Please use with caution. Official Introduction link

Import Flutter into iOS native projects

Prepare a native iOS project

Hybrid development requires a native project. Depending on your needs, you can either use the existing APP or create a temporary Demo to practice. We’re going to create a temporary native iOS Demo.The native project is simple, just two lines of code.

Create a Flutter Module project

Create a Flutter Module project called Module.It is best to place both projects in the same directory as the native project needs to know the location of the Flutter Module project.

Use Cocoapods to establish associations

Create the Podfile file in the native project Demo, and then edit the Podfile.

Flutter_application_path = 'Podfile relative to flutter module 'Load File. Join (flutter_application_path, '. 'podhelper.rb')Copy the code

Add the following code to each target that needs to integrate the Flutter Module

Target 'your APP' do install_all_FLutter_PODS (Flutter_APPLICation_path) endCopy the code

The Podfile will look like this.Then performpod installThe commandThe integration is complete as shown in the figure above. The next step is to show the content of Flutter in the native project.

Displays a single Flutter page

There are two ways to display a single Flutter page. One is to use FlutterEngine, and the other is to not use FlutterEngine. In fact, it is not serious to say that we do not use FlutterEngine, but we did not use code to create FlutterEngine. The Flutter framework creates its own FlutterEngine, but for the sake of memorization we can think of it this way. However, this approach without using FlutterEngine is not officially recommended. Since creating the FlutterEngine on demand will introduce a significant delay after the FlutterViewController is presented and before the first frame of the image is rendered. However, this approach may be useful when the Flutter pages are rarely displayed, when there is no good inspiration for deciding when to start the Dart VM, and when the Flutter does not need to maintain state between pages (view controllers).

Displaying individual Flutter pages without FlutterEngine (officially not recommended)

Came toViewController.mIn-file importFlutterThe header fileDirectly to createFlutterViewControllerObject and is presented and pushedThe APP display is as follows:

Present mode display as shown in the figure:

Display individual Flutter pages using FlutterEngine

Create FlutterEngine

The right place to create FlutterEngine depends on your application. As an example, we’ll create a FlutterEngine in the AppDelegate of the application launch and expose it as a property.

inAppDelegate.hIn the 在AppDelegate.mIn the

Show FlutterViewController

Now you have a Flutter page integrated into your iOS app.

Display multiple Flutter pages

Using the above method, the final display of the Flutter page is the same page. In real hybrid development, the need to present multiple different Flutter pages should be common. So can Flutter do that? The answer is yes. The official statement is that since Flutter 2.0.0, multiple Flutter instances can be added simultaneously. Use with caution due to stability, performance issues, and API changes. link

Using FlutterEngineGroup

Display multiple Flutter pages that need to be usedFlutterEngineGroupTo create aFlutterEngine, not directly used aboveFlutterEngineThe way. inAppDelegate.hIn the 在AppDelegate.mIn the

Create a new Flutter page

Go to the Flutter Module project in Android Studio, create a page_two-.dart file and do some simple presentation PageTwoAfter the page is written, you also need to declare a new DART entry in the main.dart file. In order to find this in the nativePageTwoPage, the code is shown as follows:

page_twoisPageTwoThe entry function to the., which will be used in the native.

Show two Flutter pages

Go back to the viewController.m file of the native project and implement the following code:At line 0, we createengineNo Entrypoint argument is passed, so the default entry function is displayedmainCorresponding page. In line 1, we createengine, the entry function is specified aspage_two, the page corresponding to page_two() is displayed.

The present page is shown as follows:

The Flutter communicates with iOS

The communication between Flutter and iOS is mainly through channels. Have MethodChannel BasicMessageChannel, EventChannel etc, here introduces the front two channels. Channels are related by name, so the name of the channel needs to be unique. If there is a channel with the same name, the communication will be disturbed

MethodChannel MethodChannel

The method channel mainly uses passing method names and parameters. We created PageTwo earlier when we created PageTwoMethodChannelThe name ispage_two_channel. It then invokes a method within the click gesture of the text ‘back to previous page’invokeMethod(). This method can pass multiple arguments, the first being the method name, followed by the method parameters. We have no arguments here, just a method namepop. Now that the Flutter side is done, go back to our iOS native, ViewController.m. Implement the following code:In the iOSMethodChannelAdded aFlutterPrefix. And then initialize itFlutterMethodChannelThe name of the flutter must be the same as that of the flutter end, otherwise communication cannot be established. And then callsetMethodCallHandler:Method takes a block argument. The block argument is called on channel.invokemethod (). Block parameterscallIs a wrapper around the invokeMethod parameter.callthemethodThat’s the method name, and there’s another oneargumentsThat’s the method parameter. This allows you to make a judgment based on the method name. There is now native communication from flutter to iOS, which enables clicking methods in flutter to pop back to the previous page. Conversely, the iOS terminal can communicate with the FLUTTER terminal. On the iOS terminal, run thechannelcallinvokeMethod()Then you can send messages to the flutter. Set the same Settings on the flutter sidechannelthesetMethodCallHandlerYou can receive it. The flutter endsetMethodCallHandlerThe code is as follows:For the record, these channels cannot be used in stateless widgets, just stateful ones.

BasicMessageChannel Base message channel

In addition to the MethodChannel mentioned above, you can also use BasicMessageChannel, which supports basic asynchronous messaging using custom message codecs. In addition, you can use specialized BinaryCodec, StringCodec, and JSONMessageCodec classes, or create your own codecs.

BasicMessageChannelThis channel is used in the same way as aboveMethodChannelThe difference is that flutter is created in flutterBasicMessageChannelThis channel requires passing in a codec, using a standard codecStandardMessageCodecBasic data types can be codeced.BasicMessageChannelChannels enable communication of underlying data types. The codec relationship between iOS and FLUTTER is as follows:

conclusion

I also wanted to write a practical case of hybrid development, but since MY current focus is not on FLUTTER and there are many practical cases of this kind of hybrid development on the web, I will write this article here. The content of these 8 articles should be said to be just an iOSer introduction to FLUTTER tutorial, but it is only a superficial thing, far from mastering FLUTTER and Dart. Flutter is not intended to completely replace Android and iOS developers. Flutter can only be used to build a unified UI for each platform. The functionality and hardware requirements of Flutter will still need to be implemented by developers on each platform.