Transfer Android Implementation to Flutter Application

Question

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>

Answer 1

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());
    }
}