Question

我已经尝试过以下superellipse_shape软件包：https://pub.dev/packages/superellipse_shape

 class SuperellipseDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    
    return Material(
      color: Colors.blueAccent[400],
      shape: SuperellipseShape(
        borderRadius: BorderRadius.circular(28),
      ), // SuperellipseShape
      child: Container(
        width: 100.0,
        height: 100.0,
      ), // Container
    ); // Material

  }

}

但是侧面必须弯曲而不是拐角，有没有更简便的方法可以在没有自定义形状的情况下实现此目的？

Answer 1

尝试此代码。

import 'package:flutter/material.dart';

class CustomContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: MyRectangle(),
          child: Container(
            width: 300,
              height: 300,
          ),
        ),
      ),
    );
  }
}

class MyRectangle extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    Path path = Path();
    paint.color = Colors.red;
    path.lineTo(size.width * 0.4, size.height);
    path.cubicTo(size.width * 0.29, size.height, size.width * 0.16, size.height * 0.98, size.width * 0.09, size.height * 0.97);
    path.cubicTo(size.width * 0.06, size.height * 0.97, size.width * 0.06, size.height * 0.96, size.width * 0.05, size.height * 0.96);
    path.cubicTo(size.width * 0.04, size.height * 0.95, size.width * 0.04, size.height * 0.94, size.width * 0.03, size.height * 0.91);
    path.cubicTo(size.width * 0.01, size.height * 0.77, 0, size.height * 0.61, 0, size.height * 0.44);
    path.cubicTo(size.width * 0.01, size.height * 0.32, size.width * 0.02, size.height / 5, size.width * 0.03, size.height * 0.11);
    path.cubicTo(size.width * 0.04, size.height * 0.07, size.width * 0.04, size.height * 0.06, size.width * 0.05, size.height * 0.05);
    path.cubicTo(size.width * 0.06, size.height * 0.04, size.width * 0.07, size.height * 0.04, size.width * 0.11, size.height * 0.03);
    path.cubicTo(size.width * 0.34, -0.01, size.width * 0.66, -0.01, size.width * 0.89, size.height * 0.03);
    path.cubicTo(size.width * 0.94, size.height * 0.04, size.width * 0.95, size.height * 0.04, size.width * 0.96, size.height * 0.05);
    path.cubicTo(size.width * 0.96, size.height * 0.06, size.width * 0.97, size.height * 0.07, size.width * 0.97, size.height * 0.1);
    path.cubicTo(size.width, size.height * 0.32, size.width, size.height * 0.63, size.width * 0.98, size.height * 0.86);
    path.cubicTo(size.width * 0.97, size.height * 0.94, size.width * 0.96, size.height * 0.95, size.width * 0.95, size.height * 0.96);
    path.cubicTo(size.width * 0.92, size.height * 0.97, size.width * 0.77, size.height, size.width * 0.65, size.height);
    path.cubicTo(size.width * 0.59, size.height, size.width * 0.46, size.height, size.width * 0.4, size.height);
    path.cubicTo(size.width * 0.4, size.height, size.width * 0.4, size.height, size.width * 0.4, size.height);
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

我的输出是：

Answer 2

您可以使用boards public certificate

这是文档： https://api.flutter.dev/flutter/widgets/CustomPaint-class.html

Answer 3

将此形状另存为SVG，最好没有背景。然后使用此工具https://www.flutterclutter.dev/tools/svg-to-flutter-path-converter/将SVG转换为Flutter代码。

Answer 4

您可以使用 Custom Paint 创建任何自定义设计，形状或线条。请使用该链接作为参考，以了解如何使用 Custom Paint

或者从颤抖的官方文档中：https://api.flutter.dev/flutter/widgets/CustomPaint-class.html

编辑： 如果您不想使用Custom Paint进行操作，则可以在任何照片编辑软件中打开此图像，并删除图像的背景，并在需要的地方使用形状作为图像。通过将其导入资产文件夹。

如何在颤振中达到这种形状？

4 个答案: