Fluent generates icon prompt logo widget

        Sometimes in order to provide users with some additional status , Often in Icon The corner of the is displayed with additional icons , Such as the common digital red dot logo , We don't implement the red dot logo today , Instead, use a smaller Icon Make prompt logo , To show some other States , Such as “ Mushroom meter ”app One of them IconButton There is a logo in the upper left corner and the upper right corner of the button respectively to indicate that the timing record and the alarm record have been opened . The example is as follows ：

 

       Flutter There is no ready-made Icon Prompt logo Widget, Of course, it can be implemented with a third-party library , But it is not always convenient to use ready-made wheels , In fact, it's very simple to realize this function . Just use  Stack and  Positioned It can be done easily , The code is as follows ：

  ///  Generate badged  Icon
  /// icondata - IconData  type , contain  Icon  Icon data 
  /// sups - List<IconData?>  type , Include superscript  Icon  An array of icon data 
  /// color - Color  type , Specify the superscript badge color 
  Widget supIcon(IconData icondata, List<IconData?> sups,{color=Colors.yellow}) {
    List<Widget> _pos = [Icon(icondata)];
    for (var i = 0; i < sups.length; i++) {
      if (sups[i] != null) {
        _pos.add(
          Positioned(
              top: i == 0 || i == 1 ? -6.0 : null,
              left: i == 0 || i == 3 ? -6.0 : null,
              right: i == 1 || i == 2 ? -6.0 : null,
              bottom: i == 2 || i == 3 ? -6.0 : null,
              child: Icon(
                sups[i],
                size: 16,
                color: color,
              )),
        );
      }
    }

    return Stack(
        clipBehavior: Clip.none,
        children: _pos
        );
  }

The code is simple , But realized the logo of four corners . The calling code is also relatively simple , There is no art here .