Flutter中的重叠卡效果

Question

如何在 SliverAppBar 中创建重叠的纸牌效果，如图所示：

我尝试了以下this中的文章，但问题是它使用 Stack 和

Stack{
  ...
  overflow: Overflow.visible,
  ...
}

要实现此目的，并在Stack中，部分小部件的溢出不会接受输入，因此使我的 TabBar半死。

如何避免这种情况？

Answer 1

完整代码

import 'package:flutter/material.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MenuList(),
    );
  }
}

class MenuList extends StatefulWidget {
  @override
  _MenuListState createState() => _MenuListState();
}


class _MenuListState extends State<MenuList> {
  static const double _appBarBottomBtnPosition =
  24.0; //change this value to position your button vertically

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text(
              'Testing',
              style: TextStyle(color: Colors.red),
            ),
          ),
          SliverAppBar(
            pinned: true,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              titlePadding: EdgeInsets.only(bottom: 25),
              title: Text('Title'),
            ),
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(0.0),
              child: Transform.translate(
                offset: const Offset(0, _appBarBottomBtnPosition),
                child: RaisedButton(
                  shape: StadiumBorder(),
                  child: Text("Click Here"),
                  onPressed: () {},
                ),
              ),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.only(top: _appBarBottomBtnPosition),
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
                (context, index){
                  Color color = Colors.red.withOpacity(1- (index%10)/10);
                  return Container(
                    color: color,
                    alignment: Alignment.center,
                    child: Text("Color: $color"),
                  );
                }
            ),
          ),
        ],
      ),
    );
  }
}