美文网首页
Flutter初步探索(五)展示网络图片

Flutter初步探索(五)展示网络图片

作者: 安啡他命 | 来源:发表于2018-12-27 23:58 被阅读13次

    Displaying images is fundamental for most mobile apps. Flutter provides the Image Widget to display different types of images.

    In order to work with images from a URL, use the Image.network constructor.

    Image.network(
      'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
    )
    
    

    Bonus: Animated Gifs

    One amazing thing about the Image Widget: It also supports animated gifs out of the box!

    Image.network(
      'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
    );
    
    

    Placeholders and Caching

    The default Image.network constructor does not handle more advanced functionality, such as fading images in after loading or caching images to the device after they’re downloaded. To achieve these tasks, please see the following recipes:

    Complete example

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        var title = 'Web Images';
    
        return MaterialApp(
          title: title,
          home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: Image.network(
              'https://github.com/flutter/website/blob/master/src/_includes/code/layout/lakes/images/lake.jpg?raw=true',
            ),
          ),
        );
      }
    }
    
    

    [图片上传中...(image-499c48-1545926302127-0)]

    三、原文链接

    1.Flutter初步探索(三)列表视图

    四、参考文档

    1.Basic List

    五、公众号

    不器猿

    相关文章

      网友评论

          本文标题:Flutter初步探索(五)展示网络图片

          本文链接:https://www.haomeiwen.com/subject/ruyjlqtx.html