Please enable JavaScript.

Coggle requires JavaScript to display documents.

Flutter Image (其它 (图片载入的渐入效果(FadeInImage) + 图片载入前<loading效果>…

- - - - pubspec.yaml中添加transparent_image插件
        
        transparent_image 下载网址:
        https://pub.dev/packages/transparent_image#-installing-tab--
      - 写代码
        
        使用 child: FadeInImage.memoryNetwork() 内存中加载Placeholder
        
        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) {
        final title = 'Fade in images';
        return MaterialApp(
        title: title,
        home: Scaffold(
        appBar: AppBar(
        title: Text(title),
        ),
        body: Stack(
        children: <Widget>[
        Center(child: CircularProgressIndicator()),
        Center(
        child: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: 'https://www.devio.org/img/avatar.png',
        ),
        ),
        ],
        ),
        ),
        ),
        }
        }
    - - pubspec.yaml中添加transparent_image插件
        
        transparent_image 下载网址:
        https://pub.dev/packages/transparent_image#-installing-tab--
      - 写代码
        
        使用 child: FadeInImage.assetNetwork 本地资源中加载Placeholder
        
        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) {
        final title = 'Fade in images';
        return MaterialApp(
        title: title,
        home: Scaffold(
        appBar: AppBar(
        title: Text(title),
        ),
        body: Center(
        child: FadeInImage.assetNetwork(
        placeholder: 'assets/loading.gif',
        image: 'https://www.devio.org/img/avatar.png',
        ),
        ),
        ),
        ),
        }
        }
      - pubspec.yaml声明图片路径
        
        // assets:
        // - assets/loading.gif
  - - - cached_network_image 下载网址:
        https://pub.dev/packages/cached_network_image#-installing-tab-
    - - 使用 child: new CachedNetworkImage 缓存到本地
        
        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) {
        final title = 'Cached Images';
        return new MaterialApp(
        title: title,
        home: new Scaffold(
        appBar: new AppBar(
        title: new Text(title),
        ),
        body: new Center(
        child: new CachedNetworkImage(
        imageUrl: 'https://www.devio.org/img/avatar.png',
        placeholder: (context, url) => new CircularProgressIndicator(),
        ),
        ),
        ),
        ),
        }
        }
- - - - // assets:
        // -images/my_icon.png
    - - 使用AssetImage访问图片
        
        Image( height: 26.0, width: 26.0, image: AssetImage(my_icon.png),)
      - 使用Image.asset加载静态图片
        
        Image.asset( my_icon.png, width: 26.0, height: 26.0, )
- - - - Image.network{ 'http://www.devio.org/img/avatar.png', width: 26.0, height: 26.0, }
    - - Image( height: 26.0, width: 26.0, NetworkImage( 'http://www.devio.org/img/avatar.png' ), )
- - - - import 'dart.io';
        Image.file( File('/sdcard/Download/Stack.png'), ),
    - - pubspec.yaml中添加path_provider插件
        
        path_provide 下载网址:
        https://pub.dev/packages/path_provider#-installing-tab-
      - 写代码
        
        使用FlutterBuilder 加载图片的相对路径
        
        使用getExternalSorageDirectory() 获取图片在设备中的绝对路径
        
        import 'dart:io';
        import 'package:path_provider/path_provider.dart';
        // Image.file( File('/sdcard/Download/Stack.png') ),
        FlutterBuilder( future: _getLocalFile('Download/Stack.png') ),
        builder: (BuildContext context, AsyncSnapshot<File> snapsho){
        return snapshot.data != null ? Image.file(snapshot.dart) : Container(); })
        // 获取SDCard 的路径
        Future<File> _getLocalFile(String filename) async{ String dir = (await getExternalSorageDirectory() ).path;
        File f = File( '$dir/$filename' );
        return f; }