Transfer Android Implementation to Flutter Application
You could try doing this using a PlatformView
in flutter.
You can convert your android/ios features into their respective own separate views/controllers and add the view to the flutter widget tree using the AndroidView
(Android) or UiKitView
(iOS).
Platform views allow to embed native views in a Flutter app, so you can apply transforms, clips, and opacity to the native view from Dart. This allows you, for example, to use the native Google Maps from the Android and iOS SDKs directly inside your Flutter app, by using Platform Views.
You can refer to the official docs for PlatformView
here
Following is an example with a simple android view:
Flutter:
Widget build(BuildContext context) {
// This is used in the platform side to register the view.
final String viewType = "NativeView";
// Pass parameters to the platform side.
final Map<String, dynamic> creationParams = <String, dynamic>{};
return AndroidView(
viewType: viewType,
layoutDirection: TextDirection.ltr,
creationParams: creationParams,
creationParamsCodec: const StandardMessageCodec(),
);
}
Android:
Create the native View class on android and implement the PlatformView
from the android flutter plugin
class NativeView implements PlatformView {
@NonNull private final TextView textView;
NativeView(@NonNull Context context, int id, @Nullable Map<String, Object> creationParams) {
textView = new TextView(context);
textView.setTextSize(72);
textView.setBackgroundColor(Color.rgb(255, 255, 255));
textView.setText("Rendered on a native Android view (id: " + id + ")");
}
@NonNull
@Override
public View getView() {
return textView;
}
@Override
public void dispose() {}
}
Create a factory class for the above native view class by implementing the PlatformViewFactory
class NativeViewFactory extends PlatformViewFactory {
@NonNull private final BinaryMessenger messenger;
@NonNull private final View containerView;
NativeViewFactory(@NonNull BinaryMessenger messenger, @NonNull View containerView) {
super(StandardMessageCodec.INSTANCE);
this.messenger = messenger;
this.containerView = containerView;
}
@NonNull
@Override
public PlatformView create(@NonNull Context context, int id, @Nullable Object args) {
final Map<String, Object> creationParams = (Map<String, Object>) args;
return new NativeView(context, id, creationParams);
}
}
And finally just register the PlatformView
in your FlutterActivity
class:
public class MainActivity extends FlutterActivity {
@Override
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
flutterEngine
.getPlatformViewsController()
.getRegistry()
.registerViewFactory("NativeView", new NativeViewFactory());
}
}
Hamza Khurshid
Updated on December 24, 2022Comments
-
Hamza Khurshid 11 months
I have an implementation of a dual-camera activity as an Android Kotlin project. I want to use the same dual-camera in flutter as flutter doesn't have any libraries to for dual-camera functionality.
I have tried doing it with platform channels, but as it turns out the platform channels are just for message-passing between flutter and native platform. I don't just want to pass messages, I want an android project's fragment/activity to include as a flutter widget which I can use wherever I want.
Basically, there is an Android activity, which has some Kotlin code associated with it. I want all of it to be working in flutter and communicate with it, both the XML front-end and the Kotlin backend. I am attaching my xml file here for reference. The code file just populates the xml components.
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="2" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <SurfaceView android:id="@+id/surfaceView2" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.2" /> <SurfaceView android:id="@+id/surfaceView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="-65dp" android:layout_weight="1" /> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:maxHeight="30dp" android:src="@drawable/ic_inclinedline"/> </FrameLayout> </androidx.constraintlayout.widget.ConstraintLayout>
-
Hamza Khurshid about 3 yearsFor the specific case of Dual-Camera implementation, only a view won't be sufficient. We need to record video, images and share them with flutter implementation too. How do you think we can solve the complete problem?
-
yusufpats about 3 years
PlatformView
also has platform channel callback handlers. And also you can use theMethodChannel
to pass data or invokeMethods from either side of the code, flutter or native. You can also take a look into thePlatformViewLink
which gives gesture controls, etc to interact with other side of code