Я хочу создать эффект, как показано ниже, я добавил карту и контейнер в стек, чтобы показать верхний значок. Но я не уверен, какой виджет использовать для этого верхнего левого угла значка.

enter image description here

Может ли кто-нибудь посоветовать мне, как добиться этого эффекта.

Мое текущее состояние: введите описание изображения здесь

2
Aawaz Gyawali 10 Дек 2018 в 19:47

1 ответ

Лучший ответ

Используйте CustomPaint для треугольной части и составьте текст в Row

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 2.0;
    Path path = Path();
    path.moveTo(0.0, size.height);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

И в вашем Row

Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           SizedBox(
             height: 8.0,
             width: 5.0,
             child: CustomPaint(
               painter: TrianglePainter(),
             ),
           ),
           Container(
             decoration: BoxDecoration(
                 color: Colors.red,
                 borderRadius: BorderRadius.only(
                     topRight: Radius.circular(6.0),
                     bottomLeft: Radius.circular(6.0))),
             width: 120.0,
             height: 30.0,
             child: Center(
               child: Text(
                 'Customer Replay',
                style: TextStyle(color: Colors.white),
               ),
             ),
           ),
         ],
        ),

enter image description here

8
Raouf Rahiche 10 Дек 2018 в 20:31