Flutter：每个边缘的颜色渐变

Posted 2023-03-05

【中文标题】Flutter：每个边缘的颜色渐变

【英文标题】：Flutter: Gradient with color for each edge

【发布时间】：2021-03-16 06:26:58

【问题描述】：

是否可以在其中定义每个边缘（topRight、bottomRight、bottomLeft 和 topLeft）的颜色的渐变？正如您在图像上看到的，我有两种不同的渐变。现在我需要将它们组合在白色区域。

【参考方案1】：

我想在颤振中没有简单的解决方案，您可以使用大约两个具有 ShaderMask 的 LinearGradient 或具有不透明度的双容器，但两者都不会为您提供强大的解决方案：

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
            child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.red,
                  Colors.green,
                ]),
          ),
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [
                    Colors.black.withOpacity(0.5),
                    Colors.white.withOpacity(0.5),
                  ]),
            ),
          ),
        )),
      ),
    );