Transfer Android Implementation to Flutter Application

869

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());
    }
}
Share:
869
Hamza Khurshid
Author by

Hamza Khurshid

Updated on December 24, 2022

Comments

  • Hamza Khurshid
    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
    Hamza Khurshid about 3 years
    For 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
    yusufpats about 3 years
    PlatformView also has platform channel callback handlers. And also you can use the MethodChannel to pass data or invokeMethods from either side of the code, flutter or native. You can also take a look into the PlatformViewLink which gives gesture controls, etc to interact with other side of code