Flutter加载本地和网络图片(含普通图片和gif动图)

本文目的

在Flutter中加载本地图片和网络图片

效果图

1. 加载本地图片

• 将图片放在工程目录下,如images目录
• 修改pubspec.yaml,在flutter节点下增加如下信息:

  assets:
  - images/

• 显示本地图片

new Image.asset(
  'images/baduanjin_2.webp',
)

2. 加载网络图片

Image.network(
  'https://upload-images.jianshu.io/upload_images/7439651-d5e585fa4baa1e5f.gif?imageMogr2/auto-orient/strip|imageView2/2/w/298/format/webp',
)

主要代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('加载图片demo'),
      ),
      body: new ListView(
        children: [
          Container(
            margin: EdgeInsets.only(top: 12.0),
            child: Column(
              children: [
                Text('1.加载网络图片'),
                Image.network(
                  'https://upload-images.jianshu.io/upload_images/7439651-d5e585fa4baa1e5f.gif?imageMogr2/auto-orient/strip|imageView2/2/w/298/format/webp',
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 12.0),
            child: Column(
              children: [
                Text('2.加载本地图片'),
                new Image.asset(
                  'images/baduanjin_2.webp',
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

完整源代码

https://gitee.com/hspbc/flutter_image_demo

关于我

厦门大学计算机专业 | 前华为工程师 Java | 安卓 | 前端 | 小程序 | 鸿蒙 公众号：蓝不蓝编程