import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
const HomeContent({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Center(
child: Container(
width: ,
height: , child: Image.network(
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
alignment: Alignment.bottomRight,
color: Colors.green,
colorBlendMode: BlendMode.screen,
// fit: BoxFit.cover,
repeat: ImageRepeat.repeatX,
), ),
);
}
}

给container设置背景图片或者说是设置圆形图片

Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(150),//设置圆形:
image:DecorationImage(
image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
fit: BoxFit.cover
)
),
),
);
}
  Widget build(BuildContext context) {
return Center(
child: Container(
child: ClipOval(
child: Image.network(
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
height: ,
width: ,
fit: BoxFit.cover,
),
),
),
);
}

设置圆形:

child: Container(
width: ,
height: ,
decoration: BoxDecoration(
color: Colors.red,
// borderRadius: BorderRadius.all(Radius.circular(150)), //设置圆形:
borderRadius: BorderRadius.circular(),//设置圆形:
image:DecorationImage(
image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
fit: BoxFit.cover
)
),
),

flutter的 图片组件基本使用的更多相关文章

  1. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  2. flutter图片组件

    在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...

  3. 【Flutter学习】基本组件之图片组件Image

    一,概述 Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP. Image组件有多种构造函 ...

  4. 【Flutter实战】图片组件及四大案例

    老孟导读:大家好,这是[Flutter实战]系列文章的第三篇,这一篇讲解图片组件,Image有很多高级用法,希望对您有所帮助. 图片组件是Flutter基础组件之一,和文本组件一样必不可少.图片组件包 ...

  5. 解决flutter的image_cropper组件引入报错问题

    在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[A ...

  6. 图片组件——axure线框图部件库介绍

    我们在后面的组件使用中,都统一使用"从部件区域拖拽图片组件到页面区域中" 1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1 ...

  7. ReactNative: 使用Image图片组件

    一.简介 在应用程序中,图片组件非常常见,不论是缩略图.大图.还是小图标等等,都需要使用图片组件进行显示.在Web开发中提供了<img/>标签显示图片,在iOS中提供了UIImageVie ...

  8. Flutter中Expanded组件用法

    Flutter中Expanded组件用法 Expanded组件可以使Row.Column.Flex等子组件在其主轴方向上展开并填充可用空间(例如,Row在水平方向,Column在垂直方向).如果多个子 ...

  9. 【老孟Flutter】Stateful 组件的生命周期​

    老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Statefu ...

随机推荐

  1. python网络-静态Web服务器案例(29)

    一.静态Web服务器案例代码static_web_server.py # coding:utf-8 # 导入socket模块 import socket # 导入正则表达式模块 import re # ...

  2. 如何在linux环境下配置环境变量

    jdk下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 在linux环 ...

  3. ASP.NET MVC 5 入门-2控制器、路由

    一.创建项目: 上起始页,选择新项目. 在中新的项目对话框中,右侧语言类别选择C# ,然后项目类型选择Web,然后选择ASP.NET Web 应用程序 (.NET Framework) 项目模板. 将 ...

  4. C# HashCode

    如果两个对象的HashCode相等,可以认为两者相等.类型和值都相等. xx.GetHashCode();

  5. Openwrt路由器上常用的操作

    换了好些固件,大体上都差不多. 只能用opkg下载安装,不能用apt-get安装. 1.tcpdump和nano是我必备的,个人觉得nano比vi好用 opkg install tcpdump opk ...

  6. C语言 选择排序算法原理和实现 从数组中 找出最小的元素然后交换位置

    #include <stdio.h> int main(void) { /* 选择排序算法 原理:从数组中 找出最小的元素然后交换位置: */ int a[10] = {9,5,10,7, ...

  7. Flower(规律+逆向思维)

    Flower: 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6486 题解: 逆向思维+规律 因为每次剪n-1,所以逆向就是控制n-1朵不变,每次增高1 ...

  8. 一步一步跟我学ImGui.第一讲.配置OpenGl2+ImGui环境

    目录 搭建ImGui例子中的第一个OpenGl2环境 一丶搭建OpenGL2环境 1.下载GLFW库 2.解压GLFW库. 3.将GLFW库拷贝到你的工程文件下. 4.配置到Vs2013中. 5.测试 ...

  9. maven ssm 编译异常记录:

    maven ssm 编译异常记录: javax.servlet.jsp 解决: 清除 tomacat libraries 修改 pom 文件 <dependency> <groupI ...

  10. 2019 ASP.NET / ASP.NET Core 学习路线 (有中文翻译)

    1. 点击此处查看 一个了不起的.NET Core 库.工具.框架和软件的集合 2. 以下路线 适用于 ASP NET 与 ASP NET Core (建议另存为到本地, 然后再查看) 点击此处查看 ...