flutter 实现 “信用卡毛玻璃渐变新拟物设计卡片”

在Flutter中，你可以使用Container和DecoratedBox来实现毛玻璃渐变效果，并使用ClipPath来创建新拟物设计卡片的形状。以下是一个简化的例子：

import 'package:flutter/material.dart';
 
class CreditCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [
            Color(0xffeee5de),
            Color(0xffd4ae96),
          ],
        ),
        borderRadius: BorderRadius.circular(20.0),
      ),
      child: ClipPath(
        clipper: CreditCardClipper(),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20.0),
          ),
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('Card Holder Name', style: TextStyle(color: Colors.black, fontSize: 20.0)),
              SizedBox(height: 10.0),
              Text('1234 1234 1234 1234', style: TextStyle(color: Colors.black, fontSize: 18.0)),
              Spacer(),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Text(
                      'VALID\nUNTIL',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.black, fontSize: 10.0),
                    ),
                  ),
                  SizedBox(width: 10.0),
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Text('06/20', style: TextStyle(color: Colors.black, fontSize: 18.0)),
                        Text('Security Code', style: TextStyle(color: Colors.black, fontSize: 10.0)),
                        Text('123', style: TextStyle(color: Colors.black, fontSize: 20.0)),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
 
class CreditCardClipper extends CustomClipper<Path> {
  @override
  Path ge