如何实现带颜色的Flutter自定义裁剪路径？附示例图求代码

图中效果核心包含渐变背景顶部导航栏、可滚动内容区域、底部固定操作按钮组，以下是对应实现代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo Page',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CustomPage(),
    );
  }
}

class CustomPage extends StatelessWidget {
  const CustomPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 渐变背景顶部栏
      appBar: AppBar(
        title: const Text('表单页面'),
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0xFF6366F1), Color(0xFF8B5CF6)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
      ),
      // 可滚动内容区
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: List.generate(20, (index) {
            return Padding(
              padding: const EdgeInsets.only(bottom: 12.0),
              child: TextField(
                decoration: InputDecoration(
                  labelText: '输入框 ${index + 1}',
                  border: const OutlineInputBorder(),
                ),
              ),
            );
          }),
        ),
      ),
      // 底部固定操作按钮
      bottomNavigationBar: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.2),
              blurRadius: 5,
              offset: const Offset(0, -2),
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(
              onPressed: () {},
              child: const Text('取消'),
            ),
            const SizedBox(width: 16.0),
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF6366F1),
              ),
              child: const Text('确认'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

• 顶部AppBar通过flexibleSpace设置渐变背景，匹配图中顶栏效果
• 内容区用SingleChildScrollView包裹，确保内容过多时可滚动
• 底部通过bottomNavigationBar实现固定按钮栏，添加阴影增强层次感，按钮样式可按需调整颜色、尺寸

内容的提问来源于stack exchange，提问作者fatih yılmaz