如何将 LinearGradient 颜色添加到 "cupertino_rounded_corners" 小部件？

Question

我使用“cupertino_rounded_corners”的文档创建了一个 Squircle 小部件 link：https://pub.dev/packages/cupertino_rounded_corners 使用以下代码。

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.all(
          Radius.circular(4.0),
        ),
      ),
      margin: EdgeInsets.all(20.0),
      child: Material(
        color: Colors.pink,
        shape: SquircleBorder(
          radius: BorderRadius.all(
            Radius.elliptical(40.0, 40.0),
          ),
        ),
        elevation: 8.0,
        child: Padding(
            padding: EdgeInsets.all(30.0), child: Text("This is an example.")),
      ),
    );
  }

小部件如下所示：

但是，我无法为这个小部件添加 LinearGradient。

我更改了 Material 的 child 以包含 LinearGradient，但它改变了整个矩形的颜色（不再有圆角了！）。

child: Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [Colors.purple, Colors.blue],
    ),
  ),
          
  child: Padding(
    padding: EdgeInsets.all(30.0),
    child: Text("This is an example."),
  ),
),

结果如下：

问题：如何为这个小部件添加线性渐变？

Answer 1

我重新安排了一些代码并让它与以下代码一起工作：

Material(
  color: Colors.transparent,
  shape: const SquircleBorder(
    radius: BorderRadius.all(
      Radius.elliptical(40.0, 40.0),
    ),
  ),
  clipBehavior: Clip.antiAlias,
  elevation: 8.0,
  child: Container(
    padding: const EdgeInsets.all(30.0),
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [Colors.purple, Colors.blue],
      ),
    ),
    child: const Text("This is an example."),
  ),
),

重要的是您的 Material 小工具有 clipBehavior: Clip.antiAlias

Answer 2

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [Colors.purple, Colors.blue])))),
    ));
  }
}

如何将 LinearGradient 颜色添加到 "cupertino_rounded_corners" 小部件？

How to add LinearGradient colour to "cupertino_rounded_corners" widget?

flutter

linear-gradients

flutter-cupertino