flutter 图片

• 加载网络图片

  
  网络图片

class MyHomeBody extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            child: Image.network(
                "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg",
                alignment: Alignment.topCenter,
                repeat: ImageRepeat.noRepeat,
                color: Colors.red,
                colorBlendMode: BlendMode.colorDodge,
            ),
            width: 300,
            height: 300,
            color: Colors.yellow,
        ),
    );
  }
}

• 加载本地图片

  
  效果

文件工程 pubspec.yaml

class MyHomeBody extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
            child: Image.asset("images/beijing@2x.png"),
            width: 300,
            height: 300,
            color: Colors.yellow,
        ),
    );
  }
}

实现图片圆角的几种方式

• CircleAvatar

  
  CircleAvatar

class HomeContent extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: CircleAvatar(
            radius: 100,
            backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
            child: Container(
                alignment: Alignment(0, 0.5),
                width: 200,
                height: 200,
                child: Text("CaptainRoy",style: TextStyle(color: Colors.red),),
            ),
        ),
    );
  }
}

• ClipOval

  
  ClipOval

class HomeContent extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: ClipOval(
            child: Image.network(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
                width: 200,
                height: 200,
            ),
        ),
    );
  }
}

• ClipRRect

  
  ClipRRect

class HomeContent extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
                width: 200,
                height: 200,
            ),
        ),
    );
  }
}