flutter: corner mark

The corner mark should be very common. Taking the novel app as an example, the number of currently unread chapters is usually displayed on the upper right corner of the novel cover.

badges

Introduction
The Flutter badgeslibrary is an open source library for creating badge components. It provides an easy-to-use API that allows developers to easily add badge effects to Flutter applications.

Official documentation
https://pub-web.flutter-io.cn/packages/badges

Install

flutter pub add badges

Example 1

Center(
        child: badges.Badge(
      badgeContent: const Text('3',style: TextStyle(fontSize: 20),),
      child: SizedBox(
        width: 200,
        height: 260,
        child: Image.asset('lib/assets/img/error.jpg',fit: BoxFit.fill,),
      ),
    ));

Example 2

Center(
        child: badges.Badge(
      position: badges.BadgePosition.topStart(), // 角标的位置
      badgeContent: const Text(
        '3',
        style: TextStyle(fontSize: 20,color: Colors.white),
      ), // 内容
      onTap: () {
    
    
        print("点击事件");
      },
      //    样式
      badgeStyle: badges.BadgeStyle(
          shape: badges.BadgeShape.square, // 形状
          badgeColor: Colors.blue,
          padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
          borderRadius: BorderRadius.circular(10)),
      child: SizedBox(
        width: 200,
        height: 260,
        child: Image.asset(
          'lib/assets/img/error.jpg',
          fit: BoxFit.fill,
        ),
      ),
    ));

Example 3

 shape: badges.BadgeShape.twitter ,

Example 4

shape: badges.BadgeShape.instagram , // 形状

rotated_corner_decoration

Introduction
in Flutter rotated_corner_decorationis a class for creating rotating rounded corner decorations. It is a built-in decorator in the Flutter framework that can be applied to various widgets such as containers, buttons, cards, etc.

Official document
https://pub-web.flutter-io.cn/packages/rotated_corner_decoration

Install

flutter pub add rotated_corner_decoration

Example 1

Container(
          width: 200,
          height: 200,
          foregroundDecoration: const RotatedCornerDecoration.withColor(
              color: Colors.red,
              badgeSize: Size(30,30)
          ),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black,width: 1)
          ),
        )

Example 2

Container(
      width: 200,
      height: 200,
      foregroundDecoration: const RotatedCornerDecoration.withColor(
          color: Colors.red,
          badgeSize: Size(60, 60), // 大小
          badgePosition: BadgePosition.topStart, //位置
          spanBaselineShift: 4, // 文字距离斜边的距离
          textSpan:
              TextSpan(text: 'flutter', style: TextStyle(color: Colors.white))),
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
    )

Example 3

Container(
      width: 200,
      height: 200,
      foregroundDecoration: const RotatedCornerDecoration.withColor(
          color: Colors.red,
          badgeSize: Size(80, 80), // 大小
          badgePosition: BadgePosition.topStart, //位置
          spanBaselineShift: 4, // 文字距离斜边的距离
          textSpan:
              TextSpan(text: 'hello\nflutter', style: TextStyle(color: Colors.white))),
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
    )