如何在容器中心添加圆形图像

Question

我正在创建个人资料页面，我想要这样的顶部

这是我的代码

Widget build(BuildContext context) {
    return Scaffold(
     appBar: new MyAppBar(title: Text("My Profile")
    
     ),
      drawer:drawer(),
      body:
      SingleChildScrollView(
      child:Stack(children: <Widget>[
        Container(
         
          width: MediaQuery.of(context).size.width,
          height: 150,
          color: Colors.blue[500],
          child:  Align(
            alignment:Alignment(-1.4,4.0),
          child:Container(
            
          //margin: EdgeInsets.all(20),
          width: 400,
          height: 125,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: NetworkImage('https://patientcaremedical.com/wp-content/uploads/2018/04/male-catheters.jpg'),
              
            ),
          ),
        ))),
        

      ])));
  }
}

这是它的输出

从底部开始是圆的，你能帮我看看哪里做错了吗

Answer 1

你的意思是你的圆圈底部看起来是平的？这与您的代码无关。这是因为您使用的图像底部是白色的。 Take a look 给你自己。如果您将 Scaffold 的 backgroundColor: 更改为 Colors.red 或白色以外的其他内容，您就会明白我在说什么。您需要做的就是使用底部没有白色的不同图像，或者裁剪当前图像。

如何在容器中心添加圆形图像

how to add rounded image in the center of the container

profile

containers

image

rounding

flutter