带有文本和圆形颜色的 Flutter 圆形图像？

Question

我想做的小部件：

我制作的小工具：

这是我的代码：

Stack(
  alignment: Alignment.center,
  children: [
    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),
      ),
    ),
    Container(
      height: 70.0,
      width: 70.0,
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [
            Colors.black87,
            Colors.black45,
            Colors.transparent,
          ],
          stops: [0, 0.25, 1],
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
        ),
        shape: BoxShape.circle,
        border: Border.all(color: Colors.red, width: 4.0),
      ),
    ),
    Positioned(
      left: 30,
      right: -15,
      bottom: -20,
      child: SizedBox(
        height: 35.0,
        child: Text(
          '12 Mart',
          style: TextStyle(
            color: Colors.white,
            backgroundColor: Colors.red,
          ),
        ),
      ),
    ),
  ],
),

如何像第一个 Widget 一样围绕文本和圆形图片下的边缘制作一个圆圈？

Answer 1

给你：

    Stack(
          alignment: Alignment.center,
          children: [
            SizedBox(height: 75), // This container is needed only to set the overall stack height
            // for Text to be a bit below Circleavatar
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 16.0),
              height: 70.0,
              width: 70.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(35),
                color: Colors.red,
                border: Border.all(width: 4, color: Colors.red),
              ),
              child: CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://www.themoviedb.org/t/p/original/wXSnajAZ5ppTKa8Z5zzWGOK85YH.jpg'),
              ),
            ),
            Positioned(
              bottom: 0,
              child: Container(
                padding: EdgeInsets.all(3),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(35),
                  color: Colors.red,
                ),
                child: Text(
                  '12 Mart',
                  style: TextStyle(color: Colors.white, fontSize: 12),
                ),
              ),
            ),
          ],
        ),

结果：

Answer 2

这是一个使用 Stack 和三个嵌套 CircleAvatars 的解决方案：

最小工作示例：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final radius = MediaQuery.of(context).size.shortestSide * .4;
    final borderWidth = radius / 12;
    return Scaffold(
      body: Center(
        child: Badge(
          radius: radius,
          borderWidth: borderWidth,
          imageUrl:
              'https://upload.wikimedia.org/wikipedia/commons/e/ea/Retrato_del_Maestro_Yoda.jpg',
        ),
      ),
    );
  }
}

class Badge extends StatelessWidget {
  final double radius;
  final double borderWidth;
  final String imageUrl;

  const Badge({
    Key key,
    @required this.radius,
    @required this.borderWidth,
    @required this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(height: 2.1 * radius),
        Positioned(
          top: 0,
          child: CircleAvatar(
            radius: radius,
            backgroundColor: Colors.indigo,
            child: CircleAvatar(
              radius: radius - borderWidth,
              backgroundColor: Colors.black,
              child: CircleAvatar(
                radius: radius - 2 * borderWidth,
                backgroundImage: NetworkImage(imageUrl),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          child: Container(
            padding: EdgeInsets.symmetric(
              horizontal: 2 * borderWidth,
              vertical: borderWidth,
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(borderWidth),
              color: Colors.indigo,
            ),
            child: Text(
              '12 Mart',
              style: TextStyle(color: Colors.white, fontSize: 3 * borderWidth),
            ),
          ),
        ),
      ],
    );
  }
}