How to add LinearGradient colour to "cupertino_rounded

I have created a Squircle widget using the documentation for "cupertino_rounded_corners" at this link:

However, I am unable to add a LinearGradient for this widget.

I changed the child of Material to include a LinearGradient, but it changes the colour of the entire rectangle (does not have rounded corners anymore!).

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."),
  ),
),

Results in below:

Question: How to add a LinearGradient for this widget?

CodePudding user response：

I rearranged some of the code and got it to work with the following:

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."),
  ),
),

The important part is that your Material Widget has clipBehavior: Clip.antiAlias

CodePudding user response：

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])))),
    ));
  }
}