Flutter的Image

1配置远程图片

一般使用url链接，可以直接访问，但是出现问题，虚拟android设备没有连接网络无法访问url链接，因此使用的时候要用真机或者windows
使用Image.network（url）来访问，其中可以通过scale，fit，repeat来对图片进行填充方式选择

class Myapp2 extends StatelessWidget {
  const Myapp2({super.key});

  @override
  Widget build(BuildContext context) {
    var Container2 = Container(
      alignment: Alignment.center,
      height:150,
      width: 350,
      decoration:const BoxDecoration(
        color: Colors.yellow,
      ),
      // child: Image.network('https://img-blog.csdnimg.cn/9a35c53d424247f0a3bd0e8f793ac849.gif#pic_center',
      child: Image.network("https://profile-avatar.csdnimg.cn/2650e85de11441e69d09fb52e074e95f_ruan365392777.jpg!1",

      // scale: 0.5,
      // fit: BoxFit.fill,
      repeat: ImageRepeat.repeatX,
      ),
      

    );
    return Container2;
  }
}

2实现圆角的图片

圆角的一些图标能让人感觉没那么尖锐，有更好的亲和力
在Container中使用decoration然后就是相当于将图片作为背景图片，在其中使用DecorationImage来对图片引入
圆角的实现是通过对container的decoration来进行borderRadius.circular来进行圆角修饰。

//实现圆角图片
class Mycirculator extends StatelessWidget {
  const Mycirculator({super.key});

  @override
  Widget build(BuildContext context) {
    var Container3 = Container(
      alignment: Alignment.center,
      height:100,
      width: 100,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: const DecorationImage(
          image: NetworkImage("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64"),
          fit: BoxFit.fill,
        ),
      ),
    );
    return Container3;
  }
}

3使用ClipOval实现圆形图片

class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64",
      width: 100,
      height:100,
      fit: BoxFit.cover,
      ),
    );
  }
}

4本地图片引入

要在配置文件进行配置才能进行引入？？？
能否有更简单的配置引入方法

class localImage extends StatelessWidget {
  const localImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: const BoxDecoration(
        color: Colors.yellow,
      ),
      child: Image.asset("images/a.jpeg"),
    );
  }
}

所有代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("配置远程图片"),),
        body: const Column(children: [
          Myapp2(),
          SizedBox(height: 50,),
          Mycirculator(),
          SizedBox(height: 50,),
          ClipImage(),
          SizedBox(height: 50,),
          localImage(),
        ],)
        
       ),
    )
  );
}
class Myapp2 extends StatelessWidget {
  const Myapp2({super.key});

  @override
  Widget build(BuildContext context) {
    var Container2 = Container(
      alignment: Alignment.center,
      height:150,
      width: 350,
      decoration:const BoxDecoration(
        color: Colors.yellow,
      ),
      // child: Image.network('https://img-blog.csdnimg.cn/9a35c53d424247f0a3bd0e8f793ac849.gif#pic_center',
      child: Image.network("https://profile-avatar.csdnimg.cn/2650e85de11441e69d09fb52e074e95f_ruan365392777.jpg!1",

      // scale: 0.5,
      // fit: BoxFit.fill,
      repeat: ImageRepeat.repeatX,
      ),
      

    );
    return Container2;
  }
}
//实现圆角图片
class Mycirculator extends StatelessWidget {
  const Mycirculator({super.key});

  @override
  Widget build(BuildContext context) {
    var Container3 = Container(
      alignment: Alignment.center,
      height:100,
      width: 100,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: const DecorationImage(
          image: NetworkImage("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64"),
          fit: BoxFit.fill,
        ),
      ),
    );
    return Container3;
  }
}

//使用ClipOval实现圆形图片
class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network("https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_64,w_64",
      width: 100,
      height:100,
      fit: BoxFit.cover,
      ),
    );
  }
}


class localImage extends StatelessWidget {
  const localImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: const BoxDecoration(
        color: Colors.yellow,
      ),
      child: Image.asset("images/a.jpeg"),
    );
  }
}