Flutter中如何实现示例图中的Gradient渐变颜色效果

你要的这种斜向多色线性渐变可以通过Container的BoxDecoration属性搭配LinearGradient直接实现，不需要引入第三方依赖。

完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          // 占满全屏
          width: double.infinity,
          height: double.infinity,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              // 渐变方向：右上角到左下角，和示例效果一致
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // 渐变颜色，可根据设计稿调整具体色值
              colors: [
                Color(0xFF8E24AA), // 深紫
                Color(0xFFD81B60), // 玫红
                Color(0xFF1E88E5), // 亮蓝
              ],
              // 可选：配置各颜色的占比，数组长度和colors一致
              stops: [0.15, 0.55, 0.9],
            ),
          ),
          // 此处可添加页面的子组件
          child: const Center(
            child: Text(
              "渐变演示",
              style: TextStyle(color: Colors.white, fontSize: 28),
            ),
          ),
        ),
      ),
    );
  }
}

自定义调整说明 #

• 如果你需要调整渐变方向，修改begin和end的参数即可，比如Alignment.topCenter到Alignment.bottomCenter就是垂直方向渐变，Alignment.centerLeft到Alignment.centerRight就是水平方向渐变
• 色值可以直接替换为你设计稿的16进制色值，Flutter中使用16进制色值需要在前缀加0xFF，后面跟6位色值即可
• 如果需要做径向/扫描渐变，将LinearGradient替换为RadialGradient/SweepGradient，对应调整相关参数即可

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