1. 首先，在pubspec.yaml中添加gradient_widgets和flutter_svg库的依赖项。

dependencies: gradient_widgets: ^0.3.3 flutter_svg: ^0.14.2

2. 创建一个具有GradientCard的自定义小部件，该部件将显示填充，阴影以及不规则的底部。

import 'package:flutter/material.dart'; import 'package:gradient_widgets/gradient_widgets.dart'; import 'package:flutter_svg/flutter_svg.dart';

class GradientCard extends StatelessWidget { final Widget child; final Gradient gradient; final double height; final Function onTap;

const GradientCard({ Key key, this.child, this.gradient, this.height = 175.0, this.onTap, }) : super(key: key);

@override Widget build(BuildContext context) { return Container( height: height, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.8), spreadRadius: 3.0, blurRadius: 5.0, offset: Offset(0, 3), ), ], gradient: gradient, ), child: Material( color: Colors.transparent, child: InkWell( onTap: onTap, child: child, ), ), ); } }

3. 使用GradientCard小部件以及Column和Stack小部件创建新的自定义底部卡片布局。

import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:gradient_widgets/gradient_widgets.dart';

class IrregularBottomSheet extends StatefulWidget { @override _IrregularBottomSheetState createState() => _IrregularBottomSheetState(); }

class _IrregularBottomSheetState extends State { @override Widget build(BuildContext context) { return Material( child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( height: 250.0, child: Stack( children: [ Positioned.fill( child: SvgPicture.asset( 'assets/images/waves.svg', fit: BoxFit.cover, ), ), Positioned( left: 0, right: 0, top: 75.0, child: Column( mainAxisSize: MainAxisSize.min, children: [ GradientCard( gradient: Gradients.tameer, onTap: () {}, child: ListTile(