dart - Flutter:带有 CircleAvatar 的卡片，突出显示

Question

我想制作一张带有 CircleAvatar 的卡片，突出显示(您可以在这张图片中看到详细信息):

我不知道，它是如何工作的:/我用 Stack 和 Positioned Widget 做了一些尝试，但没有用...

Answer 1

我认为@Rémi Rousselet 的方法更好，但这是使用 FractionalTranslation 的另一种方法，因此您可以更多地使用 CircleAvatar

的位置

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 30.0),
      child: Container(
        child: new Stack(
          children: <Widget>[
            Card(
              child: Container(
                height: 100.0,
              ),
            ),
            FractionalTranslation(
              translation: Offset(0.0, -0.4),
              child: Align(
                child: CircleAvatar(
                  radius: 25.0,
                  child: Text("A"),
                ),
                alignment: FractionalOffset(0.5, 0.0),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

test :

return Scaffold(
  appBar: AppBar(),
  body: ListView(
    children: <Widget>[
      CustomCard(),
      CustomCard(),
      CustomCard(),
    ],
  ),
);