Flutter 阴影框效果

记录一下,防止忘记 :)

更详细的说明看另一朋友的:https://ninghao.net/video/6443

 

 

Flutter 阴影框效果_第1张图片

每一个Item的实现代码:

Container(
            height: 80,
            margin: EdgeInsets.only(top: 16, left: 38, right: 33),
            decoration: BoxDecoration(
                color: Theme
                    .of(context)
                    .backgroundColor,
                borderRadius: BorderRadius.all(Radius.circular(10)),
                border: Border.all(color: Colors.grey),
                boxShadow: [ //refer to :https://ninghao.net/video/6443
                    BoxShadow(color: Colors.grey, offset: Offset(0.0, 2.0), blurRadius: 2.0, spreadRadius: 1.0),
                ]),
            child:
            InkWell(child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                    //image
                    Container(margin: EdgeInsets.only(left: 24, right: 71), child: Icon(Icons.security),),
                    Expanded(child: Text(item.name),)
                    //Name
                ],), onTap: () {            },)
        );

 

你可能感兴趣的:(flutter)