如何在Flutter项目的theme.dart中定义全局通用渐变背景变量

你之前的写法仅存在参数配置错误，调整后即可实现和全局颜色变量一致的调用逻辑，具体实现如下：

1. 修正全局渐变定义 #

你之前的LinearGradient构造存在两个问题：

• 颜色数组的参数名为colors而非color，一个渐变实例仅需传入一次colors参数
• Dart 2.0+ 无需显式添加new关键字构造实例

在theme.dart中按如下格式定义即可：

import 'package:flutter/material.dart';

// 原有全局颜色配置
Color backgroundColor = Colors.grey.shade100;
Color primaryColor = Colors.blue.shade400;
Color secondaryColor = Colors.cyan.shade200;

// 全局线性渐变配置，和颜色变量使用逻辑完全一致
Gradient commonLinearGradient = LinearGradient(
  colors: [primaryColor, secondaryColor],
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
);

// 也可以根据需求定义径向渐变、扫描渐变
Gradient commonRadialGradient = RadialGradient(
  colors: [primaryColor, secondaryColor],
  radius: 0.7,
);

2. 全局渐变调用方式 #

直接在组件中引用已定义的渐变变量即可，示例如下：

Container(
  decoration: BoxDecoration(
    // 直接引用全局渐变变量
    gradient: commonLinearGradient,
  ),
  child: const Text("渐变背景测试"),
)

3. 拓展：动态参数渐变 #

如果需要灵活修改渐变的颜色、方向等参数，可以定义顶层函数实现动态生成：

// theme.dart中定义全局函数
Gradient buildLinearGradient(List<Color> colors, {Alignment begin = Alignment.topLeft, Alignment end = Alignment.bottomRight}) {
  return LinearGradient(
    colors: colors,
    begin: begin,
    end: end,
  );
}

// 业务代码中按需传入参数调用
Gradient customGradient = buildLinearGradient([Colors.red, Colors.orange], begin: Alignment.topCenter, end: Alignment.bottomCenter);

内容的提问来源于stack exchange，提问作者gamemaker