I have a problem. At the moment, i try to build a user status. My problem, I don't know how i can give the circle on top right a transparent border. The border should have the same color as the background. See the picture below. Is that possible, or need i a custom layout for the container?

Like this:

My example:

Here my full example:

class BuildAppChatRoom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _background_color = Colors.black12;
    var _splash_color = Theme.of(context).primaryColor.withOpacity(0.1);
    return InkWell(
      splashColor: _splash_color,
      onTap: () {},
      child: Ink(
        width: double.infinity,
        height: 80,
        color: _background_color,
        child: Center(
          child: ListTile(
            leading: BuildAppCornerCircle1(
              background_color: Colors.black12,
              circle_color: Colors.green,
              circle_height: 20,
              circle_width: 20,
              rect_color: Colors.red,
              rect_height: 60,
              rect_width: 60,
              text: 'HB',
              text_color: Colors.black,
              text_size: 18,
              key: UniqueKey(),
            ),
            title: Row(
              children: [
                //name
                Text(
                  'Name Test',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),

                //spacer
                Spacer(),

                //time
                Text(
                  '10h',
                  style: TextStyle(
                    fontSize: 15,
                  ),
                ),
              ],
            ),
            subtitle: Text('ssdddsdsdsdd\nsdds'),
          ),
        ),
      ),
    );
  }
}

class BuildAppCornerCircle1 extends StatelessWidget {
  //layout
  final Color background_color;
  final Color circle_color;
  final Color rect_color;
  final Color text_color;

  //size
  final double rect_width;
  final double rect_height;
  final double circle_width;
  final double circle_height;
  final double text_size;

  //values
  final String text;
  const BuildAppCornerCircle1({
    Key? key,
    required this.background_color,
    required this.circle_color,
    required this.rect_color,
    required this.text_color,
    required this.rect_width,
    required this.rect_height,
    required this.circle_width,
    required this.circle_height,
    required this.text_size,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      width: rect_width,
      height: rect_height,
      child: new Stack(
        //rect
        alignment: Alignment.center,
        children: <Widget>[
          new Container(
            width: rect_width, //<- here
            height: rect_width, //<- here
            margin: EdgeInsets.all(5.0), //<- padding instead of margin
            decoration: new BoxDecoration(
              color: rect_color,
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
            ),
            child: Align(
              alignment: Alignment.center,
              child: Text(
                text.toString(),
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: text_size,
                  color: text_color,
                ),
              ),
            ),
          ),

          //top right circle
          new Align(
            alignment: Alignment.topRight,
            child: new Container(
              width: circle_width,
              height: circle_height,
              decoration: BoxDecoration(
                color: background_color,
                shape: BoxShape.circle,
                border: Border.all(
                  color: Colors.transparent,
                  width: 3.0,
                ),
              ),
              child: Container(
                width: circle_width,
                height: circle_height,
                decoration: BoxDecoration(
                  color: circle_color,
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.transparent,
                    width: 4.0,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Many thx (:

Update:

I found a solution. I have create my custom painter.

CodePudding user response：

Replace this rect part

        alignment: Alignment.center,
        children: <Widget>[
          new Container(
            width: double.infinity,
            height: double.infinity,
            margin: EdgeInsets.all(5.0),
            decoration: new BoxDecoration(
              color: rect_color,
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
            ),

with

  alignment: Alignment.center,
        children: <Widget>[
          new Container(
            width: rect_width, //<- here
            height: rect_width,//<- here
            padding: EdgeInsets.all(5.0), //<- padding instead of margin
            decoration: new BoxDecoration(
              color: rect_color,
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
            ),

While we're using margin ,means it will keep distance from others object.

To know more about

• Container
• margin
• padding