Flutter图表库fl_chart的使用解析(二)-折线图

附上开发环境：

成都创新互联公司长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为正蓝企业提供专业的成都网站设计、成都网站制作，正蓝网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

折线图是一个 Widget，和普通 Widget一样声明即可：

LineChart 的构造参数是一个 LineChartData，其属性如下：

配置了三条线，所以 lineBarsData 对应的数组有三个元素。

看下 LineChartBarData 属性：

图表四个方向的边框，有总显示开关，决定是否显示和隐藏所有，如果开启，又想隐藏个别边框，需要设置透明色。

FlBorderData 对应边框信息，有两个参数， show 就是显示与隐藏的边框， border 是边框数据。

FlTitlesData 可以配置4条坐标轴，也有一个总开关，如果要显示坐标轴，就设为 true ，然后配置对应位置的数据：

每个位置对应的是 SideTitles ，设置如下：

标题是显示在坐标轴后面的文字标题，每个轴对应一个。

附上源码

Flutter_设置APP图标和启动图

更新Flutter应用程序启动图标的方式与在本机Android或iOS应用程序中更新启动图标的方式相同。

注意: 如果您重命名.png文件，则必须在您 AndroidManifest.xml 的 application 标签的 android:icon 属性中更新名称。

在 Flutter 框架加载时，Flutter 会使用本地平台机制绘制启动页。此启动页将持续到Flutter渲染应用程序的第一帧时。

Flutter小部件之图片（Image）和图标（Icon）

在Flutter中，我们可以使用Image控件来显示图片，一般来讲我们的图片资源都来源于网络或者本地图片。

Flutter中的Image也是类似。

我们先来看看Image的构造方法

下面我们来看看其常用的属性

可以看到，其常用属性跟前端中的css很像。

下面我们来简单用一用Image控件

首先是必填参数image，它接收一个ImageProvider类型的值。ImageProvider是一个抽象类，他下面有下图这些实现类，由下面这些实现类可以看出，image是可以从资源，内存，网络，和文件中获取图片。

我们先来试试加载网络图片

首先看看NetworkImage构造方法，很简单，传个url就可以了

如下：

嗯，就是这么简单。其他3种情况使用也是类似的，自行看源码即可。

实际上，Flutter给我们提供了扩展方法，使用起来更加简单，通常我们直接使用提供的扩展方法即可

如下

可以看到，他们的构造方法基本类似。

所以我们也可以这样写，跟上面的效果是一致的。

大致分为一下几步

1.创建一个文件夹，用于存放图片，如图，我创建了一个imgs的文件夹，放了一张图片

2.在pubspec.yaml中声明资源，注意声明的时候路径和前面的-是有间隔的，不然的话会报#/properties/flutter/properties/assets: type: wanted [array] got -imgs/code.png

类似的错误，声明完成后点击右上方的packages get

或

下面我们再来看看其他属性。

width，height

宽高没什么好说的，就是设置宽度和高度

配合color使用，用于设置颜色的混合模式。BlendMode是一个枚举，他有很多值

详细解析还是看官方文档吧，值太多了，我们随便用用

用于设置图片的填充方式，当图片本身小于设置的宽高或者比父控件的宽高小时，我们可以设置该属性控制图片的显示。

其值的类型是BoxFit。是个枚举

具体含义还是直接看文档即可

设置图片的对齐方式，接收一个Alignment类型的值，值如下，很好理解

为了方便看效果我们在外边套了个Container,简单的把它理解为一个容器布局就可以了，类似于html中的div或android中的Layout，我们给Container设置了宽高和背景颜色。

bottomLeft效果如下，其他的自行尝试

相对于Image，ICON可以像web一样使用字体图标，并且可以使用矢量图，无需担心失真的问题，并且体积相对较小。

我们先来看看其构造方法

很简单，我们直接来用一用

默认情况下，pubspec.yaml中uses-material-design的值为true.我们默认就可以使用Material Design字体图标

名称栏目：flutter图标怎么用,flutter 圆形按钮
文章路径：http://scyanting.com/article/dsipops.html