Flutter 動畫設置貝塞爾曲線

廢話不多說直接上源碼

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class FixedServiceView extends StatefulWidget{
  FixedServiceView({ this.sctrollController }) : super();
  ScrollController sctrollController = new ScrollController();

  @override
  _FixedServiceView createState() {
    return _FixedServiceView();
  }

}

class _FixedServiceView extends State<FixedServiceView>{
  // 滾動視圖
  ScrollController _sctrollController = new ScrollController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      _sctrollController = widget.sctrollController;
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;

    return Container(
      margin: new EdgeInsets.fromLTRB(0, 0, 0, 10),
      width: width,
      height: 180,
      alignment: Alignment.center,
      color: Colors.transparent,
      child: CurveWidget(sctrollController: _sctrollController),
    );
  }
}

// 自定義曲線視圖
class CurveWidget extends StatefulWidget{
  ScrollController sctrollController = new ScrollController();
  CurveWidget({this.sctrollController}) : super();

  @override
  _CurveWidget createState() {
    return _CurveWidget();
  }
}

class _CurveWidget extends State<CurveWidget> {
  ScrollController _sctrollController = new ScrollController();
  double _offsetY = 60;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      _sctrollController = widget.sctrollController;
      _sctrollController.addListener(() {
        setState(() {
          var tempOffsetY = 60 - _sctrollController.offset;
          if (tempOffsetY > 60) {
            tempOffsetY = 60;
          }else if (tempOffsetY < 0) {
            tempOffsetY = 0;
          }
          _offsetY = tempOffsetY;
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;
    return Container(
      width: width,
      height: 180,
      color: Colors.transparent,
      child: CustomPaint(foregroundPainter: BezierPainter(offsetY: _offsetY),),
    );
  }
}

// 曲線路徑
class BezierPainter extends CustomPainter {
  double offsetY;

  BezierPainter({ this.offsetY });

  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    final paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill;
    var path = Path();
    // 原點 p1
    path.moveTo(0, 0);
    //第2個點
    var controlPoint = Offset(size.width / 2, offsetY);
    var ednPoint = Offset(size.width, 0);
    path.quadraticBezierTo(
        controlPoint.dx,
        controlPoint.dy,
        ednPoint.dx,
        ednPoint.dy
    );
    //第3個點
    path.lineTo(size.width, size.height);
    //第4個點
    path.lineTo(0, size.height);
    path.lineTo(0, 0);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}