يمكنك استخدام Platform لادراج native views الى تطبيقات Flutter، هذا يسمح لك بتنفيذ التحركات والشفافية وارسال البيانات من Dart.
هذا يتيح لك على سبيل المثال استخدام خرائط قوقل من اندرويد او IOS مباشرة الى تطبيقك. في هذا الدرس سنقوم باستعراض كيفية استخدام هذه الميزة على Android بعد ذلك سنقوم بانشاء درس يخص نظام IOS.
Flutter تدعم نوعين من Platforn Views.

• Virtual displays
• Hybrid composition.
  لكل نوع استخدام يعتمد على طريقة استخداك
• النوع الاول يقوم بعملية render للاندرويد Views هذا لايقوم باضافة اندرويد فيو الى التطبيق. هذا النوع لايسمح بالتفاعل مع الفيو مثل لوحة المفاتيح او اي تفاعل اخر.
• اما النوع الاخر فيتطلب تحديث Flutter 1.22. هذا النوع يقوم باضافة Views مباشرة في تطبيق Flutter مما يتيح لك التفاعل مع Views من حيث استخدام الكيبورد او اي شئ اخر. الان سنفقوم باستعراض طريقية اضافتها مع الامثلة:

Hybrid Composition.

في ملفات Dart قم باشناء ملف باسم مثلا native_view_example.dart ثم قم بالتالي:

قم باضافة الباكجات التالية:

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

قم بتعديل build() كالتالي:

  @override
  Widget build(BuildContext context) {
    // This is used in the platform side to register the view.
    final String viewType = '<platform-view-type>';
    // Pass parameters to the platform side.
    final Map<String, dynamic> creationParams = <String, dynamic>{
      'name': 'Flutter'
    };

    return PlatformViewLink(
      viewType: viewType,
      surfaceFactory:
          (BuildContext context, PlatformViewController controller) {
        return AndroidViewSurface(
          controller: controller,
          gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
          hitTestBehavior: PlatformViewHitTestBehavior.opaque,
        );
      },
      onCreatePlatformView: (PlatformViewCreationParams params) {
        return PlatformViewsService.initSurfaceAndroidView(
          id: params.id,
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: StandardMessageCodec(),
        )
          ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
          ..create();
      },
    );
  }

تلاحظ في الكود السابق سنقوم بتمرير متغيرات الى Android Views وهي name:Flutter الان انتهينا من ملفات Dart سنقوم الان بالتوجة الى ملف android وسنقوم بفتحة في اندرويد ستديو لسهولة التعديل.

تعديل ملفات Android:

في مشروع اندرويد قم بانشاء كائن جديد يكون وريث من PlatformView كما ستلاحظ في الشفرة البرمجية القادمة.

package dev.flutter.example

import android.content.Context
import android.graphics.Color
import android.view.View
import android.widget.TextView
import io.flutter.plugin.platform.PlatformView

internal class NativeView(context: Context, id: Int, creationParams: Map<String?, Any?>?) : PlatformView {
    private val textView: TextView

    override fun getView(): View {
        return textView
    }

    override fun dispose() {}

    init {
        textView = TextView(context)
        textView.textSize = 72f
        textView.setBackgroundColor(Color.rgb(255, 255, 255))
        textView.text = "Rendered on a native Android view (id: $id)"
    }
}

تلاحظ قمنا باستخدام Kotlin لكتابة الكلاس يمكنك ايضا استخدام جافا، الان سنقوم بانشاء instance للكلاس السابق

import android.content.Context
import android.view.View
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

internal class NativeViewFactory() : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, id: Int, args: Any?): PlatformView {
        val creationParams = args as Map<String?, Any?>?
        return NativeView(context, id, creationParams)
    }
}

الان اخر خطوة سنقوم بتسجيل PlatformView في MainActivity.kt كما في الشفرة التالية.

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        flutterEngine
                .platformViewsController
                .registry
                .registerViewFactory("<platform-view-type>", NativeViewFactory())
    }
}

يجب عليك الان تغيير minSdkVersion الى 19 كما تلاحظ في الكود التالي.

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.android_native_view"
        minSdkVersion 19
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

الان عند تشغيل التطبيق ستلاحظ المخرجات كما في الصورة التالية.

في هذا الجزء سنقوم فقط بكتابة كود في Dart لاستخدام Virtual View سيكون اقل من السابق وسنتبع نفس طريقة اضافة الكود في اندرويد.

قم باضافة التالي في Dart.

import 'package:flutter/widget.dart';

عدل دالة build() الى التالي:

Widget build(BuildContext context) {
  // This is used in the platform side to register the view.
  final String viewType = 'hybrid-view-type';
  // 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:

في مشروع اندرويد قم بانشاء كائن جديد يكون وريث من PlatformView كما ستلاحظ في الشفرة البرمجية القادمة.

package dev.flutter.example

import android.content.Context
import android.graphics.Color
import android.view.View
import android.widget.TextView
import io.flutter.plugin.platform.PlatformView

internal class NativeView(context: Context, id: Int, creationParams: Map<String?, Any?>?) : PlatformView {
    private val textView: TextView

    override fun getView(): View {
        return textView
    }

    override fun dispose() {}

    init {
        textView = TextView(context)
        textView.textSize = 72f
        textView.setBackgroundColor(Color.rgb(255, 255, 255))
        textView.text = "Rendered on a native Android view (id: $id)"
    }
}

تلاحظ قمنا باستخدام Kotlin لكتابة الكلاس يمكنك ايضا استخدام جافا، الان سنقوم بانشاء instance للكلاس السابق

import android.content.Context
import android.view.View
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

internal class NativeViewFactory() : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, id: Int, args: Any?): PlatformView {
        val creationParams = args as Map<String?, Any?>?
        return NativeView(context, id, creationParams)
    }
}

الان اخر خطوة سنقوم بتسجيل PlatformView في MainActivity.kt كما في الشفرة التالية.

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        flutterEngine
                .platformViewsController
                .registry
                .registerViewFactory("<platform-view-type>", NativeViewFactory())
    }
}

يجب عليك الان تغيير minSdkVersion الى 20 كما تلاحظ في الكود التالي.

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.android_native_view"
        minSdkVersion 20
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

الان انتهى الدرس في الدرس القادم سنقوم باضافة PlatformView الى تطبيقات IOS