flutter加载网络图片与本地图片

>最后附带整体源码：

1.网络请求图片效果展示：附带容器整体设计

实现代码：里面的网络图片请求地址可用

/**
 * 显示网络图片
 */
class WebRequest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //新建一个容器
      child: Container(
          //添加图片的组件  Image.asset， 本地图片 Image.network 远程图片
          child: Image.network(
            "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
            alignment: Alignment.center, //图片对齐的方式
            color: Colors.blue,
            colorBlendMode: BlendMode.colorDodge, //设置图片的背景颜色
            fit: BoxFit.fill, //fit属性用来控制图片的拉伸和挤压，根据父容器来的
          ),
          height: 500.0,
          width: 400.0,
          decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(
              //all铺满整个容器背景
              color: Colors.red, //容器的背景颜色
              width: 10.0, //里面的组件与容器的内边距
            ),
            // borderRadius: BorderRadius.all(Radius.circular(150)
            // )
          )),
      alignment: Alignment.center, //容器相对与整体布局显示的区域
    );
  }
}

2.请求本地图片：先创建文件存放图片，再定义图片，最后获取：

效果展示；

步骤1：本地图片百度随便下载一张拖进去就OK了

步骤2：注意文件夹名称！注意空格！

具体代码实现：

/**
 * 显示本地图片
 * --》在主目录先创建一个新的文件夹imager
 * --》在image文件夹下放入一张图片
 * --》打开pubspec.yaml 声明添加的图片文件 配置之间注意空格
 */

class LocalRequest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //新建一个容器
      child: Container(
          //添加图片的组件  Image.asset， 本地图片 Image.network 远程图片
          child: Image.asset(
            "images/a.jpeg",
            alignment: Alignment.center, //图片对齐的方式
            // color: Colors.blue,
            colorBlendMode: BlendMode.colorDodge, //设置图片的背景颜色
            fit: BoxFit.fill, //fit属性用来控制图片的拉伸和挤压，根据父容器来的
          ),
          height: 500.0,
          width: 400.0,
          decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(
              //all铺满整个容器背景
              color: Colors.red, //容器的背景颜色
              width: 10.0, //里面的组件与容器的内边距
            ),
            // borderRadius: BorderRadius.all(Radius.circular(150)
            // )
          )),
      alignment: Alignment.center, //容器相对与整体布局显示的区域
    );
  }
}

3.实现容器以及里面的图片圆角

效果：

代码实现：

/**
 * 实现容器以及里面的图片圆角
 */
class FilletedCorner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        //新建一个容器
        child: Container(
      height: 200.0,
      width: 200.0,
      decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
            //all铺满整个容器背景
            color: Colors.red, //容器的背景颜色
            width: 10.0, //里面的组件与容器的内边距
          ),
          borderRadius: BorderRadius.circular(150), //以上实现的是容器圆角
          //往容器里面添加图片
          image: DecorationImage(
              image: new NetworkImage(
                  "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg"),
              fit: BoxFit.cover //用来对图片的拉伸
              )),
    ));
  }
}

4.实现图片圆角：

效果：

具体代实现：x

/**
 * 实现图片圆角
 * -->在图片容器ClipOval里面设置宽高
 */
class FilletedCorner2extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        //新建一个容器
        child: Container(
            child: ClipOval(
              child: Image.network(
                "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
                width: 100.0,
                height: 100.0,
              ),
            ),
            height: 200.0,
            width: 200.0,
            decoration: BoxDecoration(
              color: Colors.blue,
              border: Border.all(
                //all铺满整个容器背景
                color: Colors.red, //容器的背景颜色
                width: 10.0, //里面的组件与容器的内边距
              ),
              // borderRadius: BorderRadius.all(Radius.circular(150)
              // )
            )));
  }
}

整体源码：

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

void main() {
  runApp(WebRequest()); //main函数运行方法入口
}

/**
 * 显示网络图片
 */
class WebRequest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //新建一个容器
      child: Container(
          //添加图片的组件  Image.asset， 本地图片 Image.network 远程图片
          child: Image.network(
            "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
            alignment: Alignment.center, //图片对齐的方式
            color: Colors.blue,
            colorBlendMode: BlendMode.colorDodge, //设置图片的背景颜色
            fit: BoxFit.fill, //fit属性用来控制图片的拉伸和挤压，根据父容器来的
          ),
          height: 500.0,
          width: 400.0,
          decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(
              //all铺满整个容器背景
              color: Colors.red, //容器的背景颜色
              width: 10.0, //里面的组件与容器的内边距
            ),
            // borderRadius: BorderRadius.all(Radius.circular(150)
            // )
          )),
      alignment: Alignment.center, //容器相对与整体布局显示的区域
    );
  }
}

/**
 * 显示本地图片
 * --》在主目录先创建一个新的文件夹imager
 * --》在image文件夹下放入一张图片
 * --》打开pubspec.yaml 声明添加的图片文件 配置之间注意空格
 */

class LocalRequest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //新建一个容器
      child: Container(
          //添加图片的组件  Image.asset， 本地图片 Image.network 远程图片
          child: Image.asset(
            "images/a.jpeg",
            alignment: Alignment.center, //图片对齐的方式
            // color: Colors.blue,
            colorBlendMode: BlendMode.colorDodge, //设置图片的背景颜色
            fit: BoxFit.fill, //fit属性用来控制图片的拉伸和挤压，根据父容器来的
          ),
          height: 500.0,
          width: 400.0,
          decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(
              //all铺满整个容器背景
              color: Colors.red, //容器的背景颜色
              width: 10.0, //里面的组件与容器的内边距
            ),
            // borderRadius: BorderRadius.all(Radius.circular(150)
            // )
          )),
      alignment: Alignment.center, //容器相对与整体布局显示的区域
    );
  }
}

/**
 * 实现容器以及里面的图片圆角
 */
class FilletedCorner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        //新建一个容器
        child: Container(
      height: 200.0,
      width: 200.0,
      decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
            //all铺满整个容器背景
            color: Colors.red, //容器的背景颜色
            width: 10.0, //里面的组件与容器的内边距
          ),
          borderRadius: BorderRadius.circular(150), //以上实现的是容器圆角
          //往容器里面添加图片
          image: DecorationImage(
              image: new NetworkImage(
                  "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg"),
              fit: BoxFit.cover //用来对图片的拉伸
              )),
    ));
  }
}

/**
 * 实现图片圆角
 * -->在图片容器ClipOval里面设置宽高
 */
class FilletedCorner2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        //新建一个容器
        child: Container(
            child: ClipOval(
              child: Image.network(
                "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
                width: 100.0,
                height: 100.0,
              ),
            ),
            height: 200.0,
            width: 200.0,
            decoration: BoxDecoration(
              color: Colors.blue,
              border: Border.all(
                //all铺满整个容器背景
                color: Colors.red, //容器的背景颜色
                width: 10.0, //里面的组件与容器的内边距
              ),
              // borderRadius: BorderRadius.all(Radius.circular(150)
              // )
            )));
  }
}

flutter加载网络图片与本地图片

>最后附带整体源码：

1.网络请求图片效果展示：附带容器整体设计

2.请求本地图片：先创建文件存放图片，再定义图片，最后获取：

3.实现容器以及里面的图片圆角

4.实现图片圆角：

具体代实现：x

整体源码：

猜你喜欢