如何创建在pinterest中找到的设计
我只是想在一半的容器中创建用户圈,我尝试了很多方法但是失败了。 谢谢。
要让该半个圆圈开箱即用,您需要在“容器”顶部添加一些填充以为所需空间腾出空间。这是示例代码。首先定义圆形容器的尺寸。在这里,我将其命名为“ 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),],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',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',color: Colors.black54),Column(
children: <Widget>[
Text('Purchased',)
],)
),///Image Avatar
Container(
width: circleRadius,height: circleRadius,decoration: BoxDecoration(
shape: BoxShape.circle,boxShadow: [
BoxShadow(
color: Colors.black26,child: Padding(
padding: EdgeInsets.all(4.0),child: Center(
child: Container(
child: Icon(Icons.person),/// replace your image with the Icon
),]),
和输出:
,您可以将ClipOval
与Image
一起用于圈子
然后将Stack
小部件与Positioned
小部件结合使用,将其放入容器的一半
示例:
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',
参考