Flutter框架【2】引入静态资源以及添加交互事件

Flutter框架【2】

Flutter框架【1】_widget以及简单静态布局

本节我们实现的效果如下图所示
在界面中插入一张图片，并且★按钮可以实现点击效果
所以这里我们要涉及两个知识点：

1. 如何在flutter中导入静态资源
2. 如何为widget赋予交互效果

一、如何在flutter中导入静态资源

flutter中实现静态资源的显示，比如展示一个图片，需要三步：

1. 在工作目录下添加该图片资源
2. 在配置文件里面进行声明
3. 界面中直接引用

1.在工作目录下添加该图片资源

在工作目录下添加asset 文件夹，在该文件夹下添加图片文件【目录结构如下图所示】：

2. 在配置文件里面进行声明：

3. 界面中直接引用

使用Image组件，直接使用路径访问对应静态图片资源

new Image(
	width:300,
	image:AssetImage('images/1.jpg')
)

二、如何为widget赋予交互效果

在上一节【Flutter框架【1】_widget以及简单静态布局】的布局完成后，我们实现的效果是下图所示

在我们插入图片资源后,下一步就要完成★点击的交互效果。
在之前，我们要了解两个概念