(共556篇)
全部分类

flutter中插入图片
[ Flutter ] 

本文中的本地图片都放在/assets中

插入本地图片

一. 使用Image组件

1
2
3
4
Image(
	image: AssetImage('路径'),
    width // 宽度
)

代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Center(
          child:Image(
            image: AssetImage("images/1.png"),
            width: 200.0
          )
        )
      ),
    );
  }
}

二. 也可以使用Image.asset构造函数

1
2
3
4
Image.asset(
	'iamges/1.png',
    width: 300
)

插入网络图片

一. 使用Image组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Center(
          child: Image(
            image: NetworkImage('http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif'),
            width: 300
          ),
        )
      ),
    );
  }
}

二. 也可以使用构造函数Image.network()

1
2
3
4
Image.network(
    'http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif', 
    width: 300,
)

网络图片渐出效果

网络图片加载可能需要一些时间,可以使transparent_image包实现渐出效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'app',
      home: Scaffold(
        appBar: AppBar(
          title: Text('app bar'),
        ),
        body: Container(
          child: FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: 'http://api.codequan.com/static/blogs/7NB1D6Zco7J04HQHkbbBBf7t3q5RwDjB/images/01.png'),
        ),
      ),
    );
  }
}

网路图片设置占位符loading

cached_network_image包可以给网络图片设置占位符,在图片尚未下载完成时展示

下面这个案例使用的是CircularProgressIndicator作为占位符

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'app',
      home: Scaffold(
        appBar: AppBar(
          title: Text('app bar'),
        ),
        body: Container(
            height: 200,
            child: Center(
                child: CachedNetworkImage(
                  imageUrl:
                  'http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif',
                  placeholder: (context, url) => CircularProgressIndicator(),
                )
              )
        ),
      ),
    );
  }
}

也可以使用本地图片作为占位符

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'app',
      home: Scaffold(
        appBar: AppBar(
          title: Text('app bar'),
        ),
        body: Container(
            height: 200,
            child: Center(
                child: CachedNetworkImage(
                  imageUrl:
                  'http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif',
                  placeholder: (context, url) => Image.asset('../images/lake.jpg'),
                )
              )
        ),
      ),
    );
  }
}

这个占位符可以使用任何widget!cached_network_image包除了为网络图片设置占位符,还可以缓存下载的图片,便于应用程序脱机使用