flutter图片显示的几种方式

Posted 2022-02-18 伟雪无痕

一.本地图片加载

1.在项目根目录下创建名为 images文件夹，也可以将images放在asserts文件夹下

2.在pubspec.yaml中配置images相关的路径，并执行pub get 使配置的文件生效

1).根目录下创建的images文件夹

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
      - images/jon.jpg //images和-之间有个空格 

2).asserts下创建的images文件夹

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
      - assets/images/jon.jpg //assets和-之间有个空格 

3.在代码中使用本地图片

1).Image(image: AssetImage('images/jon.jpg’)

2).Image.asset('images/jon.jpg’)

3).依赖包中的资源图片: new AssetImage('images/jon.jpg', package: 'my_icons')

4.demo展示

class MyLayoutApp extends StatelessWidget
  @override
  Widget build(BuildContext context) 

    Column buildButtonColumn(IconData icon, String label) 
      Color color = Theme.of(context).primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Icon(icon, color: color),
          new Container(
            margin: const EdgeInsets.only(top: 10.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          ),
        ],
      );
    

    var stack = Stack(
      alignment: Alignment.center,
      children: [
        CircleAvatar(
          backgroundImage: const AssetImage('images/jon.jpg'),
          radius: 100.0,
        ),
        Container(
          decoration: const BoxDecoration(
            color: Colors.black45,
          ),
          child: Text(
            'Jon A',
            style: const TextStyle(
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
    return stack;

  

二.网络图片加载

1.加载方式：Image.network('https://...')