flutter - 如何在 flutter 中达到这种形状?

标签 flutter dart

enter image description here
我已经尝试过这个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

  }

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

最佳答案

试试这个代码。

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;
  }
}
我的输出是:
enter image description here

关于flutter - 如何在 flutter 中达到这种形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64219432/

相关文章:

Dart lambda/shortland 函数混淆

string - Flutter - 省略号的字符串检查

flutter - 具有 BLoC 模式的 BottomNavigationBar

push-notification - Flutter:即使应用关闭也会推送通知

flutter - Flutter Audiocache-播放时更改音量

flutter - 'TextStyle ?' can' t 被分配给参数类型 'TextStyle'

dart - 在嵌套模板中无法访问聚合物自定义元素属性

flutter - 该方法未为类定义 - Flutter

intellij-idea - 目前配置的 Flutter SDK 不知道是否完全支持。请更新您的 SDK 并重新启动 IntelliJ

firebase - 关于Firebase读写