Flutter loads images

load web image

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      //右对齐
      // alignment: Alignment.centerRight,
      width: 150,
      height: 150,
      decoration: const BoxDecoration(color: Colors.yellow),
      child: Image.network(
        "https://www.itying.com/themes/itying/images/ionic4.png",
        // repeat: ImageRepeat.repeat, //横向纵向复制填充
        // repeat: ImageRepeat.repeatY,//纵向复制填充
        // repeat: ImageRepeat.repeatX,//横向复制填充
        // fit: BoxFit.fitHeight, //高度撑满
        // fit: BoxFit.fitWidth, //宽度撑满
        // fit: BoxFit.cover, //裁剪中心撑满控件
        // fit: BoxFit.fill, //拉伸压缩撑满控件
        // alignment: Alignment.centerLeft, //左对齐
        // scale: 2 //按比例缩小
      ),
    ));
  }
}

Realize a circular picture

class Circular extends StatelessWidget {
  const Circular({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), //圆角设置
        image: const DecorationImage(
          image: NetworkImage(
              "https://www.itying.com/themes/itying/images/ionic4.png"),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Implement a circular image using ClipOval

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,
      ),
    );
  }
}

load local image

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

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

Images are stored under the new folder images/2.0x/

Configure pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - images/2.0x/pic1.png

SingleChildScrollView layout

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: SingleChildScrollView(
        physics: const BouncingScrollPhysics(), //下拉回弹效果（替换默认下拉/上拉阴影）
        child: Column(
          children: const [
            MyApp(),
            SizedBox(height: 20),
            Circular(),
            SizedBox(height: 20),
            ClipImage(),
            SizedBox(height: 20),
            LoaclImage()
          ],
        ),
      ),
    ),
  ));
}