flutter - 如何设计像给定图像一样的瓷砖？

Question

我正在尝试制作如下图所示的瓷砖。

这是我试过的一段代码:

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',fit: BoxFit.cover,), 
                                 
                               ],
                             ),
                           ),
                           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,)
                       ],
                     )

我从这段代码中得到了什么:

Answer 1

这是我使用 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.height, size.width, size.height - radius)
      ..lineTo(size.width, tipHeight + radius)
      ..quadraticBezierTo(size.width, 0, size.width - radius, 0)
      ..quadraticBezierTo(size.width - radius, tipHeight,
          size.width - (radius + 8.0), tipHeight)
      ..lineTo(radius, tipHeight)
      ..quadraticBezierTo(0, tipHeight, 0, tipHeight + radius);
    canvas.drawPath(path, paint);
  }

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

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

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