Flutter中如何使用LinearGradient

在Flutter中如何正确使用LinearGradient实现渐变效果？我想在Container的background属性中添加水平渐变，但不知道如何设置colors、stops和begin/end参数。能否提供一个完整示例，同时解释下gradient和shader的区别？

2 回复

在Flutter中，使用LinearGradient创建线性渐变。在Container的decoration属性中设置BoxDecoration，并指定gradient参数。例如：

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.red, Colors.blue],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

colors定义渐变颜色，begin和end指定渐变方向。

更多关于Flutter中如何使用LinearGradient的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 LinearGradient 可以为容器、文本或其他小部件添加线性渐变背景。以下是基本用法和代码示例：

基本步骤：

  1. 导入 Flutter 材料包（如果已包含可忽略）：

    import 'package:flutter/material.dart';

  2. 在 Container 的 decoration 属性中定义 LinearGradient：

    Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.red, Colors.blue], // 渐变颜色列表
      begin: Alignment.topLeft,         // 渐变起始点
      end: Alignment.bottomRight,       // 渐变结束点
    ),
  ),
)

参数说明：

  • colors：必需参数，定义渐变的颜色列表（至少两个颜色）。
  • begin 和 end：指定渐变方向，使用 Alignment 对象（如 Alignment.centerLeft）或 FractionalOffset（如 FractionalOffset(0.0, 0.5)）。
  • stops：可选参数，定义每个颜色对应的位置（0.0 到 1.0 之间），例如 stops: [0.0, 0.5] 表示第一个颜色从 0% 开始，第二个颜色到 50% 结束。
  • tileMode：如何处理渐变范围外的区域，默认为 TileMode.clamp。

完整示例：

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.yellow, Colors.green],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      stops: [0.2, 0.8], // 黄色从 20% 开始，绿色到 80% 结束
    ),
  ),
)

其他用法：

  • 文本渐变：通过 ShaderMask 包裹 Text 小部件，将 LinearGradient 作为 shader。
  • 按钮渐变：直接在 ElevatedButton 的 style 中设置。

通过调整参数，可以轻松实现水平、垂直或对角线渐变效果。

回到顶部