Flutter web: SliverPersistentHeader behavior

Question

I'm following this tutorial, but using flutter web

I came across this issue with my code:

  @override
  Widget build(BuildContext context) {
    final Size _size = MediaQuery.of(context).size;
    return Center(
        child: Container(
          height: _size.height,
          width: maxWidth(_size),
          color: indigo,
          child:  CustomScrollView(
            slivers: <Widget>[
              SliverPersistentHeader(
                pinned: true,
                floating: true,
                delegate: SliverHeaderDelegate(
                  minExtent: _size.height*0.1,
                  maxExtent: _size.height*0.5),),
            SliverFillRemaining()
          ],),),);}}

where the header delegate is:

class SliverHeaderDelegate implements SliverPersistentHeaderDelegate {
    SliverHeaderDelegate({
    this.minExtent,
    @required this.maxExtent,
  });
  final double minExtent;
  final double maxExtent;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent)=> 
    Center(
      child: Container(
          child:Text('test',textScaleFactor: 5,),
    );

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate)=> true;

  @override
  FloatingHeaderSnapConfiguration get snapConfiguration => null;
}

gives this result

but if I replace the SliverPersistentHeader with this:

  SliverAppBar( pinned: true,
          expandedHeight: _size.height*0.5,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('test',textScaleFactor: 5,),
          ),),

the result changes drastically as you can see here

any idea why and how to correct it? thanks