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 / 4, size.height);
   var firstEndPont = Offset(size.width / 2, size.height - 40);
   
   // 把设置好的第一个样式添加到路径里面
   path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
    firstEndPont.dx, firstEndPont.dy);

   // 设置第二个曲线的样式    
   var secondConttrolPoint = Offset(size.width / 4 * 3, size.height - 70);
   var secondEndpoint = Offset(size.width, size.height - 40);
   
   // 把第二个设置好的样式添加到路径里面
   path.quadraticBezierTo(secondConttrolPoint.dx, secondConttrolPoint.dy,
   secondEndpoint.dx, secondEndpoint.dy);
   // 设置路径的结束点
    path.lineTo(size.width, size.height-40);
    path.lineTo(size.width, 0);

    // 返回路径
    return path;
 }

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