Flutter实现带文本的圆形图片：如何为文本添加圆形边框并实现圆形图片下方边缘效果

Hey there! Let's fix those two things you mentioned—adding a circular border to the date text and getting that nice edge effect below the circular image. Here's how to adjust your code:

1. Circular Border for the Text #

We'll wrap the text in a Container with a circular shape, add the border, and tweak the positioning so it sits perfectly below the image. I kept the red background but added a white border (you can swap the color if needed) and added padding to keep the text centered inside the circle.

2. Edge Effect Below the Image #

I added a soft shadow to the image container to give it a lifted look, and adjusted the gradient overlay slightly to make the bottom edge of the image blend more naturally with the shadow.

Here's the updated code:

Stack(
  alignment: Alignment.center,
  children: [
    // Image Container with Shadow for Edge Effect
    Container(
      margin: const EdgeInsets.symmetric(horizontal: 16.0),
      height: 70.0,
      width: 70.0,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage('https://www.themoviedb.org/t/p/original/wXSnajAZ5ppTKa8Z5zzWGOK85YH.jpg'),
          fit: BoxFit.cover,
        ),
        shape: BoxShape.circle,
        border: Border.all(color: Colors.red, width: 4.0),
        // Soft shadow below the circle
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 6,
            offset: Offset(0, 3), // Pushes shadow downward
            spreadRadius: 1,
          ),
        ],
      ),
    ),
    // Adjusted Gradient Overlay
    Container(
      height: 70.0,
      width: 70.0,
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [
            Colors.black87,
            Colors.black45,
            Colors.transparent,
          ],
          stops: [0, 0.3, 1], // Darken more of the bottom to match shadow
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
        ),
        shape: BoxShape.circle,
        border: Border.all(color: Colors.red, width: 4.0),
      ),
    ),
    // Circular Text with Border
    Positioned(
      left: 40, // Adjusted to center the circle below the image
      bottom: -17,
      child: Container(
        width: 35,
        height: 35,
        decoration: const BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
          border: Border.all(color: Colors.white, width: 2.0), // Circular border around text
        ),
        child: const Padding(
          padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),
          child: Text(
            '12 Mart',
            style: TextStyle(
              color: Colors.white,
              fontSize: 12, // Fit text inside the circle
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    ),
  ],
)

Key tweaks explained:

• Text Container: Used BoxShape.circle for the container, added a border, and wrapped the text in Padding to ensure it fits neatly inside the circle. Positioning was adjusted to center it below the image.
• Image Shadow: Added boxShadow to the image container to create a soft drop shadow, which gives the desired edge effect below the circular image.
• Gradient Adjustment: Tweaked the stops in the linear gradient to make the dark bottom portion more prominent, helping it blend smoothly with the shadow.

Feel free to adjust border colors, shadow intensity, or text size to match your exact target widget!

内容的提问来源于stack exchange，提问作者lavara123