Flutter 的曲线的弧度的绘制

最终效果

入口文件

import 'package:flutter/material.dart';
import 'home_page.dart';
main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 取消debug 图标
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: HomePage(),
      
    );
  }
}

方法文件

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 裁切的控件
          ClipPath(
            // 只裁切底部的方法
            clipper: BottonClipper(),
            child: Container(
              color: Colors.deepOrange,
              height: 300,
            ),
          )
        ],
      ),
    );
  }
}
class BottonClipper extends CustomClipper {

  @override
  Path getClip(Size size) {
    // 路径
    var path = Path();
    // 设置路径的开始点
    path.lineTo(0, 0);
    path.lineTo(0, size.height-50);

    // 设置曲线的开始样式
    var firstControlPoint = Offset(size.width / 2, size.height);
    // 设置曲线的结束样式
    var firstEndPont = Offset(size.width, size.height - 50);
    // 把设置的曲线添加到路径里面
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
     firstEndPont.dx, firstEndPont.dy);

    // 设置路径的结束点
     path.lineTo(size.width, size.height-50);
     path.lineTo(size.width, 0);

     // 返回路径
     return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}