如何设计给定图像的瓷砖？

问题描述

我正在尝试制作下图所示的图块。

这是我尝试过的一段代码：

Column(
                       mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
                         ListTile(
                           leading: Container(
                             alignment: Alignment.center,height:  MediaQuery.of(context).size.height/20,width:  MediaQuery.of(context).size.height/20,decoration: BoxDecoration(
                             color: index.isEven?Colors.yellow:Colors.orange,shape: BoxShape.circle,image: snapshot.data.content[index].image != null? DecorationImage(
                                 image: NetworkImage(snapshot.data.content[index].image.fileUrl),fit: BoxFit.cover
                               ):null
                             ),child: snapshot.data.content[index].image == null?
                             Icon(Icons.person):Container()
                             
                           ),title:Text(
                             snapshot.data.content[index].name,style: TextStyle(  
                             fontWeight: FontWeight.bold)
                           ),subtitle: Text(snapshot.data.content[index].phoneNumber),trailing: Container(
                             alignment: Alignment.centerRight,width: MediaQuery.of(context).size.width/5.5,child: Row(
                               mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
                               Image.asset('assets/icons/reminder.png',fit: BoxFit.cover,),Image.asset('assets/icons/calendar_soon.png',],onTap: (){
                             //
                           },Container(
                           alignment: Alignment.center,height: MediaQuery.of(context).size.height/25,width: MediaQuery.of(context).size.width/1.5,decoration: BoxDecoration(
                             color: Colors.green[100],borderRadius: BorderRadius.only(
                               bottomLeft: Radius.circular(10),topLeft:  Radius.circular(10),bottomRight:  Radius.circular(30),)
                           ),child: Text("12 Mar,Marriage Anniversary",style:TextStyle(color: Colors.green)),SizedBox(height:5),Divider(height: 0.5,)
                       ],)

以及我从这段代码中得到的东西：

解决方法

这是我使用CustomPainter的尝试：

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas,Size size) {
    final radius = 16.0;
    final tipHeight = size.height * 0.2;
    final paint = Paint()..color = const Color(0xFFDEF8EB);
    final path = Path()
      ..moveTo(0,tipHeight)
      ..lineTo(0,size.height - radius)
      ..quadraticBezierTo(0,size.height,radius,size.height)
      ..lineTo(size.width - radius,size.height)
      ..quadraticBezierTo(
          size.width,size.width,size.height - radius)
      ..lineTo(size.width,tipHeight + radius)
      ..quadraticBezierTo(size.width,size.width - radius,0)
      ..quadraticBezierTo(size.width - radius,tipHeight,size.width - (radius + 8.0),tipHeight)
      ..lineTo(radius,tipHeight)
      ..quadraticBezierTo(0,tipHeight + radius);
    canvas.drawPath(path,paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

要实现它，您需要使用CustomPaint小部件：

Container(
  height: 50.0,width: 300,child: CustomPaint(
    painter: CurvePainter(),),