关键词：Image、本地图片、远程图片、图片剪切、圆角实现

所有Flutter图片建议都写成远程的

注意将图片定义在Container，便于控制

两种引入方式：

1. 本地图片 Image.asset
2. 远程图片

常用属性：

1. alignment:Alignment.bottomRight
2. 颜色图片混合部分
   • color: Colors.blue,
   • colorBlendMode: BlendMode.darken,//混合模式,以上面的蓝色为主色调
3. fit:BoxFit.cover,//填充背景设置的容器
4. repeat: ImageRepeat.repeatX,//平铺，或复制图片横向填充

远程图片及使用属性的例子

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text("flutter demo"),
        ),
        body: const HomeContent()
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child:Container(
        child: Image.network(
          "https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg",
          // alignment: Alignment.topLeft,//显示在左上角
          alignment:Alignment.bottomRight,//显示右下角

          //颜色图片混合部分
          // color: Colors.blue,
          // colorBlendMode: BlendMode.darken,//混合模式,以上面的蓝色为主色调

          fit:BoxFit.cover,//填充背景设置的容器

          repeat: ImageRepeat.repeatX,//平铺，或复制图片横向填充

        ),
      
        width:300,
        height:300,
        decoration: const BoxDecoration(color: Colors.yellow),
      )
    );
  }
}

更多属性参考官方文档

实现圆角及圆形图片方法

推荐使用第二种方式

第一种 BoxDecoration

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text("flutter demo"),
        ),
        body: const HomeContent()
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child:Container(
        
        width:300,
        height:300,
        decoration: const BoxDecoration(
          color: Colors.yellow,
          //第一种实现圆形图片的方法
          borderRadius: BorderRadius.all(//变成一个黄色的圆形
          Radius.circular(150),
          )
        ),
      )
    );
  }
}

第二种 ClipOval

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text("flutter demo"),
        ),
        body: const HomeContent()
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      //在没有设置长宽的情况下，对图片应进行对应处理：如果是正方形就处理成圆形、如果是长方形就处理成椭圆
      //在设置后，根据处理后的长宽进行处理
      child:Container(
        child: ClipOval(
          child: Image.network(
            'https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg',
            height: 100,
            width: 100,
            fit:BoxFit.cover
            ),
          
          //在这个部分
        ),
       
      )
    );
  }
}

Flutter引入本地图片

该方法略麻烦，每一个图片都需要配置

现在已有方法直接引入整个文件夹，未来待修缮

1. 在根目录下新建images的文件包，该包与lib同级

2. 在该包下新建2.0x、3.0x、4.0x包

   • 2.0x、 3.0x是必须有的
   • 运行后手机可以根据不同的屏幕分辨率提取对应包内文件进行加载

3. 在文件包下放入图片

4. pubspec.yaml

   -新增配置数据

assets:
    - iamges/a.jpg
    - images/2.0x/a.jpg
    - images/3.0x/a.jpg
    - images/4.0x/a.jpg

添加图片并引用后

main中代码

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: const Text("flutter demo"),
        ),
        body: const HomeContent()
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child:Container(
        child: Image.asset('images/a.jpg',
          fit:BoxFit.cover),
      ),
    );
  }
}