如何在 Flutter 中创建这个 UI ..？答案

【问题标题】：How can I create this UI in Flutter..?如何在 Flutter 中创建这个 UI ..？
【发布时间】：2020-12-30 02:10:11
【问题描述】：

我想在 Flutter 中实现这个 UI，我该怎么做..？我尝试使用 CustomPainter() 类来做，但我没有得到这种类型的整理..？

【问题讨论】：

【解决方案1】：

你必须使用某种数学来实现这种输出以及颤振 custompaint()。您可以找到有关如何使用轴值绘制曲线和形状的详细说明这里，Paths in flutter 和这里，Drawing Custom Shapes

我在我的一个应用程序中应用了一些类似的曲线。下面是代码。

类文件

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;
 }
}

然后在你要申请的文件中，就可以使用

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

您可以使用上面的链接来了解如何绘制路径和曲线。同样通过上面的示例代码，您可以了解此类曲线在 Flutter 应用中的使用。

祝你好运！！！

【讨论】：

你能分享那波的截图吗..？