老套路: 讓我們看一下效果唄:
接入方式
接入的方式,我是參考的官方的介紹文件,我這裡嘗試的是android的接入方式,還算比較順利。
1、在你的Android工程目錄同級目錄下執行命令
flutter create -t module my_flutter
,執行完畢之後,應該是這個樣子。
2、開啟你的Android工程的setting.gradle檔案,行起一行,加上:
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'tip_flutter/.android/include_flutter.groovy' // new
))
複製程式碼
這幾行程式碼的意思就是說,將你剛才建立的那個module作為android模組引入到Android工程中。 3、最後開啟你的app目錄下的build.gradle,在依賴中加上
//flutter
implementation project(':flutter')
複製程式碼
ok,同步一下,你就將flutter引入到的你現有的android工程了,ios的步驟就不作介紹了,參照文件,實際上不復雜。
遇到問題
當然,我上面說的過程相當順利,但是,我接入的過程並沒有這麼順利,我各種都會嘗試一下。
1、比如,我們不在Android工程的同級目錄去flutter create -t module my_flutter
會怎麼樣,我嘗試了,只需要對路徑加上你工程目錄名即可,這麼寫
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'你工程目錄名/tip_flutter/.android/include_flutter.groovy' // new
))
複製程式碼
也ok,但是不雅觀,那ios引入這個flutter模組,豈非需要到你android工程中來找,所以,獨立於Android工程會更優雅點,保持物理解耦。
2、有些小夥伴可能配置了buildTypes
,當然,同步的話肯定是失敗的,解決的辦法是修改你的.android目錄的flutter目錄中的build.gradle。保持和你的app的buildTypes一致即可。
3、debug跑的很好,release跪了,這個肯定就是混淆的問題了,可以參考
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.** { *; }
-keep class io.flutter.util.** { *; }
-keep class io.flutter.view.** { *; }
-keep class io.flutter.** { *; }
-keep class io.flutter.plugins.** { *; }
複製程式碼
4、找不到libflutter.so 這個明顯就是沒有載入到對應的cpu架構支援的so庫,請參考這裡,有人直接
ndk {
abiFilters "armeabi","armeabi-v7a"。。。。把所有的都加上,這,你的包大的你受得了麼。
}
複製程式碼
總結,其實接入的過程並沒有那麼順利,哈哈,還是蠻多坑的,不過一般都能找到解決辦法。
使用姿勢
原生模組要拉起flutter模組的方式官方提供了兩種: 1、直接createView創造一個flutterView,把他新增到你的佈局中,這裡的route1。
View flutterView = Flutter.createView(
MainActivity.this,
getLifecycle(),
"route1"
);
FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
layout.leftMargin = 100;
layout.topMargin = 200;
addContentView(flutterView, layout);
複製程式碼
相信你一開始不知道是什麼,這實際上是flutter管理頁面的一種方式,使用路由來處理,可以為每個頁面配置好路由,這裡route1表示那個頁面的名字,這樣就可以直接跳到名字為route1的按個頁面,如果寫"/"
,那就是直接跳到main.dart的那個頁面了,這裡繼續深究,為什麼"/"
跳到main,那是因為main.dart裡面的這句話
void main() => runApp(new MyApp());
,可以理解他是根。
2、使用fragment的方式
FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
tx.replace(R.id.someContainer, Flutter.createFragment("route1"));
tx.commit();
複製程式碼
好了,以上就是兩種元素模組應用flutter模組的方式,實際上機智的你會發現是一種而已,都是新增了一個flutterView到原生中而已,而你看原始碼,發現flutterView實際上是SurfaceView而已,只不過實現了一個特殊的介面BinaryMessenger
。
flutter呼叫原生模組
光開啟一個flutter實現的頁面,非常簡單,可是裡面展示的資料從哪裡來呢?通常有兩種方式,
a、nativie把資料傳送過去給到flutter端。
b、flutter端向native端要資料。
這裡,我們首先來看第二種,flutter端向native端要資料
,因為第二種官方提到的比較多,通常flutter呼叫原生的方式是通過MethodChannel
來做的,具體怎麼做,我們先來了解下。
MethodChannel(getFlutterView(), "app.channel.shared.data")
.setMethodCallHandler(MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
if (methodCall.method.contentEquals("getSharedText")) {
result.success("some thing want to send to flutter");
sharedText = null;
}
}
});
複製程式碼
我們看下的原始碼定義,這裡擷取部分
public final class MethodChannel {
private static final String TAG = "MethodChannel#";
private final BinaryMessenger messenger;
private final String name;
private final MethodCodec codec;
public MethodChannel(BinaryMessenger messenger, String name) {
this(messenger, name, StandardMethodCodec.INSTANCE);
}
複製程式碼
前面提到過,第一個引數是BinaryMessenger
,由於FlutterView
實現了這個介面,所以,官方demo中傳給的是getFlutterView()
。
那麼很顯然,我們前面提到的使用姿勢
章節介紹了兩種方式,第一種方式,FlutterView很明顯就在那裡,你很容易拿到他,然後開啟一個MethodChannel。那麼第二種方式呢?不急,看看FlutterFragment
是個什麼鬼。
public class FlutterFragment extends Fragment {
public static final String ARG_ROUTE = "route";
private String mRoute = "/";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mRoute = getArguments().getString(ARG_ROUTE);
}
}
@Override
public void onInflate(Context context, AttributeSet attrs, Bundle savedInstanceState) {
super.onInflate(context, attrs, savedInstanceState);
}
@Override
public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return Flutter.createView(getActivity(), getLifecycle(), mRoute);
}
}
複製程式碼
開啟一看很簡單,onCreateView
返回的其實就是一個FlutterView,這也就是前面提到的,實際上原生引用flutter模組其實就是往已有的佈局上加FlutterView而已。
好,弄清楚了兩種方式之後,下面,我以第二種方式的形式來介紹一下,具體如何操作。
public class FlutterBaseFragment extends FlutterFragment {
private static final String METHOD_CHANNEL = "tip.flutter.io/method";
public static FlutterBaseFragment newInstance(String route) {
Bundle args = new Bundle();
args.putString(ARG_ROUTE, route);
FlutterBaseFragment fragment = new FlutterBaseFragment();
fragment.setArguments(args);
return fragment;
}
@SuppressWarnings("unchecked")
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
new MethodChannel((FlutterView) getView(), METHOD_CHANNEL).setMethodCallHandler(
new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall call, final MethodChannel.Result result) {
if (call.method.equals("getBatteryLevel")) {
int batteryLevel = getBatteryLevel();
if (batteryLevel != -1) {
result.success(batteryLevel);
} else {
result.error("UNAVAILABLE", "Battery level not available.", null);
}
} else {
result.notImplemented();
}
}
});
}
private int getBatteryLevel() {...}
}
複製程式碼
以上就是原生的實現部分,然後,flutter那邊如何呼叫呢?
class _MyHomePageState extends State<MyHomePage> {
static const platform = const MethodChannel('tip.flutter.io/method');
String _batteryLevel = 'Unknown battery level.';
Future<Null> _getBatteryLevel() async {
String batteryLevel;
try {
final int result = await platform.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level at $result % .';
} on PlatformException catch (e) {
batteryLevel = "Failed to get battery level: '${e.message}'.";
}
setState(() {
_batteryLevel = batteryLevel;
});
}
複製程式碼
很熟悉吧,這就是官方demo而已。
那麼,通過MethodChannel傳送給flutter的資料難道就沒有要求麼?任意型別的資料都能傳送麼?很抱歉,並不是,比如,你自定義的class顯然是不可以的。他支援的型別只有以下:
so、我們要傳送自定義型別資料過去如何辦?
顯然,我們需要轉換為dart支援的型別,也許,你可能想到了Object->Json,然後,到了flutter那邊,在變為Json物件即可。 不過也有其他的方式,比如,你們恰好使用的是protobuf的話,那麼直接傳byte[]肯定很不錯啦,再者,你還可以實現自定義協議,如果有足夠的時間的話。總之傳遞的資料需要是平臺之間都能識別的型別。
原生向flutter傳送資料
原生向flutter傳送資料,這個感覺起來怪怪的,那麼,具體的場景是什麼,舉個例子是不是好理解點,好的,比如,手機充電狀態的改變,這個變動的訊息,如何傳達到flutter那邊呢?
這時候,就需要用到EventChannel,實際上和MethodChannel傳送資料過去的方式沒啥區別,只不過,我們理解, MethodChannel是flutter端主動請求,拿到了資料,而,EventChannel可能理解為是從原生主動推送過去的。
new EventChannel((FlutterView) getView(), EVENT_CHANNEL).setStreamHandler(new EventChannel.StreamHandler() {
@Override
public void onListen(Object arguments, final EventChannel.EventSink events) {
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
events.success("當前時間毫秒" + System.currentTimeMillis() / 1000);
}
}, 1000, 1000);
}
@Override
public void onCancel(Object arguments) {
...
}
});
複製程式碼
那麼,flutter端的程式碼,怎麼收到這個EventChannel推送過去的資料呢?
Future<Null> _lisEvent() async {
String eventStr;
try {
_streamSubscription =
eventChannel.receiveBroadcastStream().listen((data) {
eventStr = 'event get data is $data ';
setState(() {
_eventStr = eventStr;
});
});
} on PlatformException catch (e) {
eventStr = "event get data err: '${e.message}'.";
setState(() {
_eventStr = eventStr;
});
}
}
複製程式碼
總結
原生拉起flutter做的頁面以及flutter呼叫原生模組以及原生模組推送資料到flutter經過驗證都是ok的,因此flutter接入現有的app這條路是可行的,接入flutter之後,包大小會激增5.5M+
,主要是因為需要用到這個so庫,如果能夠從網路獲取多好,可惜目前只能打包到apk中。在加上業務生成的一些檔案,總體上來說,寫一個簡單的業務,就差不多使得包大小增加了8M左右啦
,