Flutter:我该如何创建容器外一半的圆形头像?

如何创建在pinterest中找到的设计

Flutter:我该如何创建容器外一半的圆形头像?

我只是想在一半的容器中创建用户圈,我尝试了很多方法但是失败了。 谢谢。

iffta 回答:Flutter:我该如何创建容器外一半的圆形头像?

要让该半个圆圈开箱即用,您需要在“容器”顶部添加一些填充以为所需空间腾出空间。这是示例代码。首先定义圆形容器的尺寸。在这里,我将其命名为“ 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
                  ),]),

和输出:

enter image description here

,

您可以将ClipOvalImage一起用于圈子

然后将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',

参考

本文链接:https://www.f2er.com/3109939.html

大家都在问