功能控件案例练习

自定义剪裁案例

import 'package:flutter/material.dart';

class CustomBackground extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        body: ClipPath(
          child: Stack(
            fit: StackFit.expand,
            children: [
              Container(
                decoration: BoxDecoration(
                    color: Color(0xff622F74),
                    gradient: LinearGradient(
                        colors: [Colors.blue, Colors.deepOrangeAccent],//  blue deepOrangeAccent
                        begin: Alignment.centerRight,
                        end: Alignment(-1.0, -1.0))),
              ),
            ],
          ),
          clipper: MyClipper(),
        ));
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path()
      ..lineTo(0.0, size.height / 2)
      ..lineTo(size.width, size.height / 2 - 100)
      ..lineTo(size.width, 0)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

import 'package:flutter/material.dart';

class CurveView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          constraints: BoxConstraints.expand(),
          color: Colors.white,
        ),
        ClipPath(
          //路径裁切组件
          clipper: CurveClipper(), //路径
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Color(0xFFEA3D87), Color(0xFFFF7095)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter),
            ),
            height: 320.0,
          ),
        )
      ],
    );
  }
}

/// 曲线路径
class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path()..lineTo(0, size.height - 60.0);

    var firstControlPoint = Offset(size.width / 2, size.height);
    var firstEdnPoint = Offset(size.width, size.height - 60.0);

    path.quadraticBezierTo(
        firstControlPoint.dx,
        firstControlPoint.dy,
        firstEdnPoint.dx,
        firstEdnPoint.dy);

    path..lineTo(size.width, size.height - 60.0)
      ..lineTo(size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

/// 波浪线路径
class WavyLineClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size){
    var path = Path()
      ..lineTo(0, size.height - 40.0);

    //第一段曲线控制点
    var firstControlPoint = Offset(size.width/4, size.height);
    var firstEndPoint = Offset(size.width/2.25, size.height-30);
    path.quadraticBezierTo(
        firstControlPoint.dx,
        firstControlPoint.dy,
        firstEndPoint.dx,
        firstEndPoint.dy);

    //第二段曲线控制点
    var secondControlPoint = Offset(size.width/4*3, size.height-90);
    var secondEndPoint = Offset(size.width, size.height-40);
    path.quadraticBezierTo(
        secondControlPoint.dx,
        secondControlPoint.dy,
        secondEndPoint.dx,
        secondEndPoint.dy);

    path..lineTo(size.width, size.height-40)
      ..lineTo(size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Flutter 评分控件的实现

公众号“编程之路从0到1”