Flutter：带有圆形头像的卡片，突出显示

Question

我想制作一张带有CircleAvatar，突出的卡片（您可以在这张图片中看到详细信息）：

我不知道，它是如何工作的：/我尝试了一些带有 aStack和定位小部件的东西，但它没有用......

Answer 1

我认为 @R\xc3\xa9mi Rousselet 方式更好，但这是另一种使用方式，FractionalTranslation这样你就可以更多地利用CircleAvatar

\n\n

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

\n\n

\n

测试 ：

\n

\n\n

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

\n\n

\n

Answer 2

Stack 确实是解决方案。

Stack(
  children: <Widget>[
    Card(
      margin: const EdgeInsets.only(top: 20.0),
      child: SizedBox(
          height: 100.0,
          width: double.infinity,
          child: Padding(
            padding: const EdgeInsets.only(top: 45.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Foo",
                  style: Theme.of(context).textTheme.subhead,
                ),
                Text("bar")
              ],
            ),
          )),
    ),
    Positioned(
      top: .0,
      left: .0,
      right: .0,
      child: Center(
        child: CircleAvatar(
          radius: 30.0,
          child: Text("D"),
        ),
      ),
    )
  ],
),