颤振曲线

如何解决颤振曲线

制作一个ShapeBorder像这样的自定义类（关键方法是_getPath返回形状的Path）：

class CustomShapeBorder extends ShapeBorder {
  const CustomShapeBorder();

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  @override
  Path getouterPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  _getPath(Rect rect) {
    final r = rect.height / 2;
    final radius = Radius.circular(r);
    final offset = Rect.fromCircle(center: Offset.zero, radius: r);
    return Path()
      ..moveto(rect.topLeft.dx, rect.topLeft.dy)
      ..relativeArcToPoint(offset.bottomright, clockwise: false, radius: radius)
      ..lineto(rect.center.dx - r, rect.center.dy)
      ..relativeArcToPoint(offset.bottomright, clockwise: true, radius: radius)
      ..relativeArcToPoint(offset.topRight, clockwise: true, radius: radius)
      ..lineto(rect.centerRight.dx - r, rect.centerRight.dy)
      ..relativeArcToPoint(offset.topRight, clockwise: false, radius: radius)
      ..addRect(rect);
  }

  @override
  EdgeInsetsGeometry get dimensions {
    return EdgeInsets.all(0);
  }

  @override
  ShapeBorder scale(double t) {
    return CustomShapeBorder();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
  }
}

现在您可以像这样使用它：

    Container(
      margin: EdgeInsets.only(top: 80),
      height: 50,
      width: double.infinity,
      decoration: Shapedecoration(
        shape: CustomShapeBorder(),
        //color: Colors.orange,
        gradient:
            LinearGradient(colors: [Colors.blue, Colors.orange]),
        shadows: [
          BoxShadow(
              color: Colors.black, offset: Offset(3, -3), blurRadius: 3),
        ],
      ),
    ),

结果：

解决方法

我想知道是否有更好的解决方案来制作如下图所示的弯曲条。

这是我的颤动代码：

import 'package:flutter_web/material.dart';

class CurvedBar extends StatelessWidget {
    const CurvedBar({
      Key key,}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return Container(height: 50,color: Colors.orange,child:  Column(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20.0),bottomRight: Radius.circular(20.0)),child: Container(
              height: 20.0,width: double.infinity,color: Colors.white,),Container(
           color: Colors.white,child:  Row( 
            children: <Widget>[
              Flexible(
                  flex: 1,child: ClipRRect(
                    borderRadius:
                        BorderRadius.only(topRight: Radius.circular(20.0)),child: Container(
                      height: 20.0,)),Flexible(
                  flex: 1,child: ClipRRect(
                    borderRadius:
                        BorderRadius.only(topLeft: Radius.circular(20.0)),))
            ],))
        ],));
    }
  }