Flutter--Image组件、网络图片、本地图片、剪裁图片

Flutter中，我们可以使用Image组件去加载显示图片，Image的数据源可以是asset、文件、内存以及网络。 用的比较多的是

Image.asset 本地图片 Image.network 网络图片

Image用得比较多的属性有：

(1)alignment Alignment 图片的对齐方式

(2)fit BoxFit 图片的剪裁方式

(3)repeat 平铺

1.加载网络图片

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 150,
        width: 150,
        decoration: const BoxDecoration(color: Colors.yellow),
        //https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png
        child: Image.network(
          'https://www.itying.com/themes/itying/images/ionic4.png',
          // scale: 2,
          //fit常用的cover fitWidth fitHeight contain
          // fit:BoxFit.contain
          //
          repeat: ImageRepeat.repeat,
        ),
      ),
    );
  }
}

2.加载本地图片

class LocalImage extends StatelessWidget {
  const LocalImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(75),
      ),
      child: Image.asset('images/ic_shape.png',fit: BoxFit.cover,),
    );
  }
}

3.剪裁图片

常见的需求有裁剪圆形图片，有如下两种方式：

class Circular extends StatelessWidget {
  const Circular({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
          image: const DecorationImage(
            image: NetworkImage(
                'https://www.itying.com/themes/itying/images/ionic4.png'),
            fit: BoxFit.cover,
          ),
          borderRadius: BorderRadius.circular(75)),
    );
  }
}

class ClipImage extends StatelessWidget {
  const ClipImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network('https://www.itying.com/themes/itying/images/ionic4.png',
      width: 150,
      height: 150,
      fit: BoxFit.cover,),
    );
  }
}