如何实现背景颜色渐变效果
纯色背景会略显单调，本文介绍 flutter 中如何实现背景颜色渐变效果。
1. LinearGradient
Gradient 用来实现 flutter 里的渐变，它有以下几种实现：LinearGradient、SweepGradient 和 RadialGradient 。本文使用 LinearGradient 来实现渐变效果。
LinearGradient 的构造函数如下，begin和end两个参数表示渐变开始和结束的地方，可以用它们来指定渐变的方向：如果希望水平方向，则从 topLeft 到 topRight；如果希望竖直方向，则从 topLeft 到 bottomLeft 。除了使用 Alignment 里定义的常量外，也可以使用 FractionalOffset 指定任意的位置。
LinearGradient({AlignmentGeometry begin = Alignment.centerLeft, AlignmentGeometry end = Alignment.centerRight, required List<Color> colors, List<double>? stops, TileMode tileMode = TileMode.clamp, GradientTransform? transform})
colors是一个颜色数组，用来指定渐变使用的颜色。stops也是一个数组，它和颜色数组的长度一样，取值范围为[0,1]，用来表示对应每个颜色的分数。以本文红蓝渐变为例，colors的数组如下,红色在前，蓝色在后。如果设置stops值为[0.2,0.8]，则表示[0,0.2]之间为纯红色，[0.2,0.8]之间为红蓝渐变，[0.8,1]为纯蓝色。
colors: [Colors.red, Colors.blue]
如果设置起点是 topLeft，终点是 bottomRight，stops设置为[0.5,0.5]，还能得到下面效果。
tileMode用来指定如何填充begin之前和end之后的内容，加入想要实现下图中的对称效果，可以将开始设置为topCenter，结束设置为topRight，tileMode设置为TileMode.mirror。
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.topCenter,
end: Alignment.topRight,
stops: [0, 1],
tileMode: TileMode.mirror))
2. 完整代码
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main(List<String> args) {
runApp(const MaterialApp(
title: "Planets",
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.menu),
onPressed: () {},
),
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.5, 0.5],
tileMode: TileMode.clamp)),
),
title: Center(
child: Text(
"Gradient",
style: GoogleFonts.poppins(
fontWeight: FontWeight.w600, fontSize: 36.0),
),
),
actions: [
IconButton(onPressed: () {}, icon: const Icon(Icons.settings))
],
),
body: Container(),
),
);
}
}