本头条核心宗旨
欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。
技术刚刚好经历
近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！
本文核心要点
渐变是一种有规律性的变化。渐变能给人很强的节奏感和审美情趣。这种形式在日常生活中随处可见，是一种常见的视觉形象。由于绘画中透视的原理，物体就会出现近大远小的变化，许多自然理象都充满了渐变的形式特点。运用渐变技术能使画面更加丰富，给人视觉更强的冲击力。
渐变效果看起确实比一般纯色看起来要好看些，所以今天我也来讲解一下Flutter怎么实现这样的效果，学过前端H5开发的应该知道css实现渐变效果。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
渐变效果
今天我们来看看Flutter是怎么实现这种效果的。
<code>import 'package:flutter/material.dart';LinearGradient getCustomGradient() { // Flutter实现渐变API：LinearGradient return LinearGradient( //渐变具有两个锚点，开始和结束。该开始点对应于0.0，并且结束点对应于1.0。这些点以分数表示，因此相同的梯度可以在不改变参数的情况下与大小变化的框一起重复使用。（这与新的ui.Gradient.linear相对，后者的参数以逻辑像素表示。） colors: [Colors.pink, Colors.blueAccent], begin: const FractionalOffset(0.0, 0.0), end: const FractionalOffset(0.6, 0.0), stops: [0.0, 0.6], tileMode: TileMode.clamp);}/<code>LinearGradient讲解
这个类主要是2D渐变,渐变具有两个锚点，开始和结束。该开始点对应于0.0，并且结束点对应于1.0。这些点以分数表示，因此相同的梯度可以在不改变参数的情况下与大小变化的框一起重复使用。
运用也很简单，可以创建一个文本控件，然后设置一下背景就行了。
<code>decoration: BoxDecoration( // Add Gradient gradient: utils.getCustomGradient())))));/<code>
总结
本文讲解了Flutter实现渐变背景色方法，本头条每天更新一些Flutter小知识点，看起来不累，学习起来轻松，快来快来学习哈。
閱讀更多 技術剛剛好 的文章
