Unread read icon rectangle flutter-CodePudding

how can I give this view in my container top left. It simply makes a person realize if this notification is read or not. Do I need to use a badge? Because I assume there is a functionality needed.

CodePudding user response：

If you don't want to use an asset image as the other answer suggests, you can create a simple class which you can use to paint this shape. See the code below, you have to add your condition where marked with comment:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyUnreadMarker extends CustomPainter {
  late Paint painter;
  MyUnreadMarker() {
    painter = Paint()
      ..color = const Color(0xFF1CCCA5)
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(0, size.height);
    path.close();
    canvas.drawPath(path, painter);
  }

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Stack(children: [
      Container(color: Colors.grey, width: 100, height: 100),
      if (true) // add your condition here
        CustomPaint(size: const Size(10, 10), painter: MyUnreadMarker()),
    ]))));
  }
}

CodePudding user response：

The simplest way would be to export this asset as an image webp, and make your card a Stack and add this image on top of it. And do the proper checks to show the asset e.g

Stack(
 children:[
  if (!hasSeen)
  Image.asset('assets/not_read.webp'),
  Card(),
 ]
)