Flutter 设置圆角按钮或圆角图片 等待加载图片使用

flutter中设置圆角一般是通过Container中的decoration:去设置的，案例如下：

Center(
        child: Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.red
          ),
          child: Text('登录'),
        ),
      ),

效果如下图：

圆角切图.png

设置文字居中并让其具有点击功能

Center(
        child: InkWell(//在最外层包裹InkWell组件
          onTap: (){
            print('登录被点击');
          },
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.red
            ),
            child: Center(//加上Center让文字居中
              child: Text('登录'),
            ),
          ),
        )
        ,
      )

效果如下：

居中并有点击功能.png

有时候我们需要通过图片的裁剪来实现图片圆角的情况，但是按照我们上面的做法，发现无效：

Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.red
              ),
              child: Image.asset('images/jicheng.png'),
            ),

效果.png

解决办法如下：

 Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                  color: Colors.red
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.asset('images/jicheng.png'),
              )
            ),

这样就可以达到圆角的效果。
平时我们做开发的时候一般网络图片请求回来之前都会有一个等待加载的图片，这个怎么实现捏，解决办法如下

Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                  color: Colors.red
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: FadeInImage.assetNetwork(
                    placeholder: 'images/jicheng.png',
                    image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558521166075&di=d1a864cdaa9a9161f16b578363d74894&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fcbf456b1d2b8a6556ec38cb5bad3ece0cc549ef5.jpg',
                    fit: BoxFit.cover,
                ),

              )
            ),

如果对大家有用，请大家点个喜欢或者赞，这是对我继续写下去的鼓励，谢谢