如何在Flutter项目中使用Java Custom View？支持转Dart或直接使用吗？

方案一：直接集成Java Custom View（无需转Dart） #

如果你不想改写现有Java代码，可以通过Flutter的Platform Views机制直接在Flutter界面中嵌入Android原生View，步骤如下：

1. Android端实现PlatformView与Factory #

创建持有你的Custom View的PlatformView实现类，以及对应的Factory来创建实例：

// 自定义PlatformView，包装你的Java Custom View
public class MyCustomViewPlatform implements PlatformView {
    private final MyCustomView customView;

    public MyCustomViewPlatform(Context context, int viewId, Map<String, Object> params) {
        customView = new MyCustomView(context);
        // 可通过params传递Flutter端的配置参数到Custom View
        // 比如 customView.setSomeParam((String) params.get("paramKey"));
    }

    @Override
    public View getView() {
        return customView;
    }

    @Override
    public void dispose() {}
}

// 用于创建PlatformView的工厂类
public class MyCustomViewFactory implements PlatformViewFactory {
    private final Context context;

    public MyCustomViewFactory(Context context) {
        this.context = context;
    }

    @Override
    public PlatformView create(Context context, int viewId, Object args) {
        Map<String, Object> params = (Map<String, Object>) args;
        return new MyCustomViewPlatform(context, viewId, params);
    }
}

2. 在Android项目中注册View #

在MainActivity里将你的自定义View注册到Flutter引擎：

public class MainActivity extends FlutterActivity {
    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        // 注册自定义View，"com.your_package/my_custom_view"是唯一标识
        flutterEngine.getPlatformViewsController().getRegistry()
                .registerViewFactory("com.your_package/my_custom_view", new MyCustomViewFactory(this));
    }
}

3. Flutter端加载原生View #

通过AndroidView组件在Flutter界面中调用：

class MyNativeCustomView extends StatelessWidget {
  const MyNativeCustomView({super.key});

  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: "com.your_package/my_custom_view",
      // 传递给原生端的参数
      creationParams: {"someParam": "value"},
      creationParamsCodec: const StandardMessageCodec(),
    );
  }
}

方案二：将Java Custom View转成Dart原生实现 #

如果希望实现跨平台（同时支持iOS），可以将Java中的绘制逻辑迁移到Dart，核心是利用Flutter的CustomPaint组件：

核心思路 #

• Java中的onDraw方法对应Dart中CustomPainter的paint方法
• 原生Android的Canvas API与Flutter的Canvas API高度相似，比如：
  • Java的canvas.drawCircle(x, y, radius, paint) → Dart的canvas.drawCircle(Offset(x, y), radius, paint)
  • Java的Paint类对应Dart的Paint类，属性设置逻辑基本一致

示例代码框架 #

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 这里复制Java Custom View中的绘制逻辑
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(size.width/2, size.height/2), 50, paint);
    // 其他绘制逻辑...
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 根据需求判断是否需要重绘
  }
}

// 使用自定义Painter的Widget
class MyDartCustomView extends StatelessWidget {
  const MyDartCustomView({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyCustomPainter(),
      size: const Size(200, 200),
    );
  }
}

两种方案的选择建议 #

• 如果仅需支持Android，且对Dart不熟悉，优先选方案一，快速复用现有Java代码，无需改写逻辑
• 如果需要跨平台支持，或希望完全融入Flutter生态，可以尝试方案二，逐步迁移绘制逻辑（复杂逻辑可分模块逐步转换）

内容的提问来源于stack exchange，提问作者Murod Khodzhaev