使圆形头像显示在屏幕顶部答案

【问题标题】：making the circular avatar show at the top of the screen使圆形头像显示在屏幕顶部
【发布时间】：2021-12-17 18:15:21
【问题描述】：

如何让circleavatar放置在容器的顶部

【问题讨论】：

标签： flutter dart user-interface

【解决方案1】：

您可以为此使用Stack。喜欢：

...
return Stack(
  children: [
    Positioned.filled( child:
    Scaffold(
      appBar: ...
      body: Column([
        DecoratedBox(
          ...
        )
      ]),
    )),
    Positioned(
      top: 24,
      child:
        CircleAvatar( child:
          CachedNetworkImage(
            ...
          ),
        ),
    ),
  ],
);

类似的东西。

【讨论】：

谢谢！它有效！

【解决方案2】：

试试下面的代码希望它对你有帮助。参考Stack class here

 Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 21),
            child: Container(
              height: 200,
              width: double.infinity,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                color: Colors.white,
                margin: EdgeInsets.all(
                  16,
                ),
              ),
            ),
          ),
          Container(
            width: 100,
            height: 90,
            decoration: ShapeDecoration(
              shape: CircleBorder(),
              color: Colors.transparent,
            ),
            child: CircleAvatar(),
          )
        ],
      ),

您的结果屏幕->

【讨论】：