将 android 原生小部件添加到 flutter（宽度道具方法和侦听器）

Question

I want to use this native widget inside my flutter project (only android side).

https://github.com/mmin18/RealtimeBlurView

(I know there are alternatives for real time blurring, but this is just an example between some other widgets and I'm looking for a general solution and an example code). So:

• How can I integrate and use it on flutter layouts like Container, or even make a new one?

• this widget has some props (for example realtimeBlurRadius and realtimeOverlayColor), how can I access and assign these values from dart file?

• What if the widget has methods or listeners? Is there a way to call or define them from flutter by need?

Thanks for your help.

Answer 1

you should use MethodChannel if you want to use android specific library or iOS specific library in Flutter

so for your problem my solution is to add RealtimeBlurView dependency in your android framework then access that with MethodChannel

so lets start:

1. create widget named BlurViewWidget like below:

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

typedef BlurViewWidgetCreatedCallback = void Function(
    BlurViewWidgetController controller);

class BlurViewWidget extends StatefulWidget {
  const BlurViewWidget({
    Key key,
    this.onBlurViewWidgetCreated,
  }) : super(key: key);

  final BlurViewWidgetCreatedCallback onBlurViewWidgetCreated;

  @override
  State<StatefulWidget> createState() => _BlurViewWidgetState();
}

class _BlurViewWidgetState extends State<BlurViewWidget> {
  @override
  Widget build(BuildContext context) {
    if (defaultTargetPlatform == TargetPlatform.android) {
      return AndroidView(
        viewType: 'plugins/blur_view_widget',
        onPlatformViewCreated: _onPlatformViewCreated,
      );
    }
    return const Text('iOS platform version is not implemented yet.');
  }

  void _onPlatformViewCreated(int id) {
    if (widget.onBlurViewWidgetCreated == null) {
      return;
    }
    widget.onBlurViewWidgetCreated(BlurViewWidgetController._(id));
  }
}

class BlurViewWidgetController {
  BlurViewWidgetController._(int id)
      : _channel = MethodChannel('plugins/blur_view_widget_$id');

  final MethodChannel _channel;

  Future<void> draggable(bool value) async {
    return _channel.invokeMethod('draggable',value);
  }
}

2.open android folder and add RealtimeBlurView dependency like below:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.github.mmin18:realtimeblurview:1.2.1'
}

3.create layout forlder in res folder and create blur_view_widget.xml inside it:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:id="@+id/blur_frame"
        android:gravity="center"
        android:background="@android:color/darker_gray"
        android:layout_width="360dp"
        android:layout_height="360dp"
        android:layout_gravity="center">

        <com.github.mmin18.widget.RealtimeBlurView
            android:id="@+id/blur_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

</FrameLayout>

4.go to src/your/package/name and create BlurViewWidget.kt ,this class has responsibility to inflate you xml view and response to MethodChannel :

package com.taleb.flutter_platformview

import android.annotation.SuppressLint
import android.content.Context
import android.view.LayoutInflater
import android.view.MotionEvent
import android.view.View
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.platform.PlatformView

class BlurViewWidget internal constructor(context: Context, id: Int, messenger: BinaryMessenger) : PlatformView, MethodCallHandler {
    private var view: View = LayoutInflater.from(context).inflate(R.layout.blur_view_widget, null)
    private val methodChannel: MethodChannel = MethodChannel(messenger, "plugins/blur_view_widget_$id")

    override fun getView(): View {
        return view
    }

    init {
        methodChannel.setMethodCallHandler(this)
    }

    override fun onMethodCall(methodCall: MethodCall, result: MethodChannel.Result) {
        when (methodCall.method) {
            "draggable" -> draggable(methodCall, result)
            else -> result.notImplemented()
        }
    }


    @SuppressLint("ClickableViewAccessibility")
    private fun draggable(methodCall: MethodCall, result: Result) {
        val isDraggable: Boolean = methodCall.arguments as Boolean
        if (isDraggable)
            view.findViewById<View>(R.id.blur_frame).setOnTouchListener(touchListener)
        else
            view.findViewById<View>(R.id.blur_frame).setOnTouchListener(null)

        result.success(null)
    }

    override fun dispose() {
    }

    private val touchListener: View.OnTouchListener = object : View.OnTouchListener {
        var dx = 0f
        var dy = 0f
        override fun onTouch(v: View?, event: MotionEvent): Boolean {
            val view = view.findViewById<View>(R.id.blur_frame)
            if (event.action == MotionEvent.ACTION_DOWN) {
                dx = view.x - event.rawX
                dy = view.y - event.rawY
            } else if (event.action == MotionEvent.ACTION_MOVE) {
                view.x = event.rawX + dx
                view.y = event.rawY + dy
            }
            return true
        }
    }


}

5.then create BlurViewWidgetFactory.kt :

package com.taleb.flutter_platformview

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

class BlurViewWidgetFactory(private val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {

    override fun create(context: Context, id: Int, o: Any?): PlatformView {
        return BlurViewWidget(context = context, id = id, messenger = messenger)
    }
}

6.then create BlurViewWidgetPlugin.kt

package com.taleb.flutter_platformview
import io.flutter.plugin.common.PluginRegistry.Registrar

object BlurViewWidgetPlugin {
    fun registerWith(registrar: Registrar) {
        registrar
                .platformViewRegistry()
                .registerViewFactory(
                        "plugins/blur_view_widget", BlurViewWidgetFactory(registrar.messenger()))
    }
}

7.and change the MainActivity.kt like below:

package com.taleb.flutter_platformview

import android.os.Bundle
import io.flutter.app.FlutterActivity
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        BlurViewWidgetPlugin.registerWith(this.registrarFor("com.taleb.flutter_platformview.BlurViewWidgetPlugin"))
    }
}

and finally test your widget from main.dart like below:

import 'package:flutter/material.dart';
import 'package:flutter_platformview/widget/blur_view_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: BlurViewWidget(
          onBlurViewWidgetCreated: _onBlurViewWidgetCreated,
        ),
      ),
    );
  }

  void _onBlurViewWidgetCreated(BlurViewWidgetController controller){
    controller.draggable(true);
  }
}

That's it. you can get complete source code of this answer Here