如何在 Flutter.. 中创建此 UI？

Question

I want to implement this UI in flutter, how can I do it.. ? I tried doing it using CustomPainter() class but I am not getting this type of finishing..?

Answer 1

You have to use some sort of mathematics to achieve this kind of output along with flutters custompaint(). You can find a detailed explanation on how to use the axis values to draw curves and shapes here, Paths in flutter and here, Drawing Custom Shapes

I have applied somewhat similar curves in one of my application. Below is the code.

Class file

import 'package:flutter/material.dart';

class CurvePainter extends CustomPainter {
 @override
 void paint(Canvas canvas, Size size) {
 var paint = Paint();
 paint.color = Colors.indigo[50];
 paint.style = PaintingStyle.fill;
 var path = Path();
 path.lineTo(0.0, size.height - 20);

 var firstControlPoint = Offset(size.width / 4, size.height);
var firstEndPoint = Offset(size.width / 2.25, size.height - 30.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
    firstEndPoint.dx, firstEndPoint.dy);

var secondControlPoint =
    Offset(size.width - (size.width / 3.25), size.height - 65);
var secondEndPoint = Offset(size.width, size.height - 40);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
    secondEndPoint.dx, secondEndPoint.dy);

path.lineTo(size.width, size.height - 40);
path.lineTo(size.width, 0.0);
path.close();
canvas.drawPath(path, paint);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
  return true;
 }
}

Then in file you want to apply, you can use

 return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      height: MediaQuery.of(context).size.height / 3,
      child: CustomPaint(
        painter: CurvePainter(),
        child: <other widgets>
      ),
      ),
   );

You can use the link above to understand how paths and curves can be drawn. Also with the example code above you can understand the use of such curves in flutter app.

Best wishes !!!