Convert flutter painter to compose-CodePudding

The

CodePudding user response：

Short answer : There is no converter Flutter <-> Android. You'll have to re-write it yourself.

Long answer :
What you're asking is to convert a specific Language (Dart) with specific Framework methods (Flutter) to another Language (Kotlin) working with another SDK (Android).
This is not possible unless you find someone mad enough to map every function of both language/framework and who publishes this converter online.

You'll have to re-develop it yourself either by :

Doing it with Jetpack Compose (if you worked a lot with Flutter, it'll be simple enough to learn)

Creating a view from scratch with a ConstraintLayout (which is easier to handle than the basic LinearLayout/RelativeLayout combos)

Displaying a Canvas in your view, and drawing on it with the Paint object.
I think this solution is the best for you since a lot of methods are quite alike between Flutter and Android. See the example below

override fun onDraw(canvas: Canvas) { super.onDraw(canvas) canvas.apply { // Draw the shadow drawOval(shadowBounds, shadowPaint) // Draw the label text drawText(data[mCurrentItem].mLabel, textX, textY, textPaint) // Draw the pie slices data.forEach { piePaint.shader = it.mShader drawArc(bounds, 360 - it.endAngle, it.endAngle - it.startAngle, true, piePaint) } // Draw the pointer drawLine(textX, pointerY, pointerX, pointerY, textPaint) drawCircle(pointerX, pointerY, pointerSize, mTextPaint) } }

Documentation is here

Exporting your Flutter Widget in a module, importing this module in your Android app, and displaying this Widget thanks to platform-views

CodePudding user response：

Jetpack Compose Canvas counterpart of this is as below

Things to note. Path is inside remember to not create a new instance on any recompositions and we set path once when it's empty

If BlendMode is needed to apply we should either set alpha of Canvas less than 1f or use a layer as in this answer

@Composable private fun FaceOutlineComposable(modifier: Modifier, frameColor: Color) { val path = remember { Path() } Canvas(modifier = modifier) { if (path.isEmpty) { val canvasWidth = size.width val canvasHeight = size.height val width = size.width * 0.95f val rect = Rect( offset = Offset((canvasWidth - width) / 2, (canvasHeight - width) / 2), size = Size(width, width) ) path.apply { addArcRad( rect.translate(0.0f, -rect.height * 0.4f), (Math.PI * 9.0 / 8.0).toFloat(), (Math.PI * 2.0 / 8.0).toFloat(), ) addArcRad( rect.translate(0.0f, -rect.height * 0.4f), (Math.PI * 13.0 / 8.0).toFloat(), (Math.PI * 2.0 / 8.0).toFloat(), ) addArcRad( rect, (Math.PI * 1.0 / 8.0).toFloat(), (Math.PI * 2.0 / 8.0).toFloat(), ) addArcRad( rect, (Math.PI * 5.0 / 8.0).toFloat(), (Math.PI * 2.0 / 8.0).toFloat(), ) } } // This is for applying blend modes with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) drawPath( path = path, color = frameColor, style = Stroke( width = 8.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round ), blendMode = BlendMode.Screen ) restoreToCount(checkPoint) } } }

Usage

FaceOutlineComposable( modifier = Modifier .fillMaxSize() .background(Color(0xff12252a)), frameColor = Color(0xff2196F3) )

Result