[英]Flutter : How can i create this circle avatar that's half out of the container?
How can I create this design I found in pinterest如何创建我在 pinterest 中找到的这个设计
I just wanted to create the user circle half of the container I tried many ways but failed.我只是想创建容器的一半用户圈我尝试了很多方法但失败了。 Thanks.
谢谢。
To let that half circle get out of the box you need to add some padding on top of the Container to make room for what you desire.要让那个半圆开箱即用,您需要在 Container 顶部添加一些填充,以便为您想要的内容腾出空间。 Here's a sample code.
这是一个示例代码。 first define the size of the circle container.
首先定义圆形容器的大小。 here I named it "circleRadius":
在这里,我将其命名为“circleRadius”:
final double circleRadius = 120.0;
Container(
height: double.infinity,
width: double.infinity,
color: Color(0xffE0E0E0),
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Padding(
padding:
EdgeInsets.only(top: circleRadius / 2.0, ), ///here we create space for the circle avatar to get ut of the box
child: Container(
height: 300.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(0.0, 5.0),
),
],
),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
SizedBox(height: circleRadius/2,),
Text('Maria Elliot', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 34.0),),
Text('Albany, NewYork', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.lightBlueAccent),),
SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Text('Likes', style: TextStyle( fontSize: 20.0, color: Colors.black54,),),
Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
],
),
Column(
children: <Widget>[
Text('Wished', style: TextStyle( fontSize: 20.0, color: Colors.black54),),
Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
],
),
Column(
children: <Widget>[
Text('Purchased', style: TextStyle( fontSize: 20.0, color: Colors.black54),),
Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
],
),
],
),
)
],
)
),
),
),
///Image Avatar
Container(
width: circleRadius,
height: circleRadius,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(0.0, 5.0),
),
],
),
child: Padding(
padding: EdgeInsets.all(4.0),
child: Center(
child: Container(
child: Icon(Icons.person), /// replace your image with the Icon
),
),
),
),
],
),
),
]),
),
and the output:和 output:
You can use a ClipOval
with the Image
for the Circle您可以将
ClipOval
与圆圈的Image
一起使用
Then to get it in the half of the container use the Stack
widget combined with the Positioned
Widget然后将它放在容器的一半中,使用
Stack
小部件和Positioned
Widget
Example:例子:
Stack(
children: <Widget>[
Container(
width: 250,
height: 250,
color: Colors.red,
),
Positioned(
top:50 ,//change this as needed
child:ClipOval(
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
],
),
References参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.