Use Flutter Image picture components

Pictures are several ways to join

• Image.asset: Load pictures resources, project resources directory is loaded in the picture, will increase the inclusions volume packaged Once your image, using a relative path.
• Image.network: network resource picture, meaning that you need to join such a network path address some of http://xxxx.xxx.
• Image.file: Load local images, is to load local files in the picture, this is an absolute path, nothing to do with the package body.
• Image.memory: Load Uint8List resource picture,

fit

• BoxFit.fill: full map display, images will be stretched, and full of the parent container.
• BoxFit.contain: full map display, showing the proportion of the original, there may be a gap.
• BoxFit.cover: display may stretch, may cut, full (picture to fill the entire container, not deformation).
• BoxFit.fitWidth: the width of the full (full transverse), the stretching may display, may be cut.
• BoxFit.fitHeight: Height full (full vertical), the display may stretch, may be cut.
• BoxFit.scaleDown: effects and contain about the same, but this property is not allowed to display more than the source image size, may not be large small.

// Flutter 图片组件
import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello world',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter')
        ),
        body: Center(
          child: Container(
            child: new Image.network ( // .asset 加载资源图片 .network 网络资源图片 .file 加载本地图片 .memory 加载Uint8List资源图片
                'http://img.zcool.cn/community/[email protected]',
                fit: BoxFit.cover, // 控制图片的拉伸和挤压 
            ),
            width: 300.0, // 图片的宽
            height: 200.0, // 图片的高
            color: Colors.lightBlue, //图片的颜色
          ),
        ),
      ),
    );
  }
}

Picture of Mixed Mode

• color: to mix colors, if you set the color just does not make sense.
• colorBlendMode: mixed mode, the equivalent of how we mix. (There are many models)

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello world',
      home:Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter')
        ),
        body: Center(
          child: new Image.network(
            'http://img.zcool.cn/community/[email protected]',
            color: Colors.greenAccent,
            colorBlendMode: BlendMode.modulate,
          )
        ),
      ),
    );
  }
}

Pictures repeat repeat

• ImageRepeat.repeat: horizontal and vertical are repeated until the entire canvas covered.
• ImageRepeat.repeatX: lateral repeated, longitudinal not be repeated.
• ImageRepeat.repeatY: longitudinal repeated, transverse not be repeated.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello world',
      home:Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter')
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'http://img.zcool.cn/community/[email protected]',
              repeat: ImageRepeat.repeat,
            ),
            width:500.0,
            height:200.0,
          ),
        ),
      ),
    );
  }
}