简介

展示网络图片的widget

• 我们可以使用NetworkImage来获取网络图片并展示

基本用法

Image.network 是 NetworkImage 提供给Image widget 的一种简写形式

• 支持scale属性进行图片的缩放

实例演示

import 'package:flutter/material.dart';

class NetworkImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(...

阅读全文...

Flutter MemoryImage

简介

将给定的Uint8List 缓冲区解码为图像的widget

• 甚至我们也可以利用的来实现将Base64编码的图片展示出来（利用 Uint8List.fromtList 构造函数）

基本用法

demo中我们作为读取内存图片来展示

• 提供给MemoryImage的字节不应该再有更改
• 如果需要经常改变的图片，请使用ImageProvider下的子类

实例演示

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'...

阅读全文...

简介

用于展示图片的widget

• 对于原始解码图像数据的不透明处理
• 如果需要获取Image对象，可以考虑使用 instantiateImageCodec
• 如果需要绘制图片，可以考虑使用 Canvas,比如： Canvas.drawImage

基本用法

这里主要介绍加入图片的几种方式

• Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径
• Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址
• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一...

阅读全文...

简介

用于展示本地的文件

• 将给定的File对象解码为图片
• 可以指定缩放scale

基本用法

简写形式和Image也都非常相似

• Image.file 是ImageFile 的一种简写形式

代码演示

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

class FileImageDemo extends State...

阅读全文...

简介

placeHodler image到目标图片的一种过渡widget

• 使用FadeInImage可以类似网络加载的图片以一个更加优雅的形式出现在屏幕上
• 如果这个图片已经被加载了，或者已经存在内存中，那么placeholder图片将不会显示

基本用法

FadeInImage的写法跟Image类似，有很多别的命名构造函数。

• fadeOutDuration和fadeOutCurve控制placeholder的淡出动画
• fadeInDuration和fadeInCurve控制目标图像的淡入动画
• 对于placeholder，更倾向于使用已经缓存的，以防止他也会突然的出现在屏幕上

实例演...

阅读全文...

简介

类似带有scale属性的AssetImage

基本使用

• 使用方法与AssetImage类似
• 可以理解为带有scale属性的AssetImage

实例演示

import 'package:flutter/material.dart';

class ExactAssetImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Imag...

阅读全文...

简介

修饰Box的图片

基本用法

demo演示作为背景图片的样例

• 一般配合BoxDecoration的img属性使用,设置背景图片
• 也可以配合paintImage使用

实例演示

import 'package:flutter/material.dart';

class DecorationImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        chi...

阅读全文...

简介

从AssetBundle中获取图像，根据上下文来确定使用确切的图像

根据给定的一些资源，AssetImage 可以根据你给定的配置，然后根据设备的像素比率和大小，然后选择合适的资源文件

基本用法

从AssetBundle中获取图像，根据上下文来确定使用确切的图像

使用命名资源文件去匹配不同像素的设备

以'Nx'的形式命名图片资源文件，其中N标识改资源文件的标称设备像素比率

假如某一个应用程序使用命名为 heart.png 的图标，此图标的表示为1.0（主图标），以及 1.5和2.0像素比。然后我们在资源包中应如下命名：

heart.png
1.5x/heart.png
2.0x/h...

阅读全文...

实现代码：

import 'package:flutter/material.dart';

class AnimationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AnimationDemo'),
          elevation: 0.0,
        ),
        body: A...

阅读全文...

实现代码：

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'dart:async';

class RxDartDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RxDart...

阅读全文...