How can i fix this SliverPersistentHeader Renderflexerror? - flutter

Question

Gif of said error
I have a SliverPersistentHeader, that as a sliver does what it is supposed to do. However the content in the sliver causes renderflex errors.
How do i fix it, so that the content inside the sliver resizes with the sliver? I choose the SliverPersistentHeader to create a stack of headers, maybe there is another widget that would be more fitting?
The slivers are built in a CustomScrollView as objects in a list of slivers.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:weather/weather.dart';[enter image description here][1]
import 'dart:math' as math;
class TracksPage extends StatelessWidget{
TracksPage();
List tracks = List();
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
),
body: CollapsingList()
);
}}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
#required this.minHeight,
#required this.maxHeight,
#required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
#override
double get minExtent => minHeight;
#override
double get maxExtent => math.max(maxHeight, minHeight);
#override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent)
{
return new SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
class CollapsingList extends StatelessWidget {
SliverPersistentHeader makeHeader(List<int> sums, int tracks, DateTime day) {
return SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 0.0,
maxHeight: 80.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey[400]),
color: Colors.white
),
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.grey,
child: Text(tracks.toString(), style: TextStyle(color: Colors.black),),),
title: Text(" ${day.day}/${day.month}/${day.year}"),
subtitle: Row(children: <Widget>[
statCircle(Image.asset("assets/images/steps.png", height: 20, fit: BoxFit.cover,), [Color(0xFFC312E4), Color(0xFF841779)], sums[0].toString(), 0),
Padding(padding: EdgeInsets.only(right: 30),),
statCircle(Icon(Icons.timer, size: 15,), [Color(0xFF73E412), Color(0xFF5B9B1A)], "", 5),
Padding(padding: EdgeInsets.only(right: 30),),
statCircle(Icon(Icons.pin_drop, size: 15,), [Color(0xFF12D6E4), Color(0xFF118470)], sums[1].toString(), 5),]),
)
)
),
);
}
Column statCircle(Widget child, List<Color> colors, String info, double padding){
return Column(children: <Widget>[
Container(
child: child,
padding: EdgeInsets.all(7),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: colors,
stops: [0.3, 0.6],
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
),
Padding(padding: EdgeInsets.only(bottom: padding),),
Text(info)
],);
}
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Firestore.instance.collection("collectionName").where("fieldName", isEqualTo:fieldVariable).snapshots(),
builder: (context, snapshot){
if(snapshot.hasData){
List dates = extractAndSort(snapshot);
return CustomScrollView(
slivers: makeSlivers(dates, context)
);
}
else return Container();
}
);
}
makeSlivers(List dates, BuildContext context){
List<Widget> slivers = new List<Widget>();
List totals = summarize(Globals.tracks);
int length;
if(Globals.tracks != null){
length = Globals.tracks.length;
} else length = 0;
slivers.add( makeCirclesHeader(totals[0], length, totals[1], context));
slivers.add(SliverPadding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
sliver: SliverToBoxAdapter(
child: Container(
height: 20,
color: Colors.white)
)
));
if(dates != null)
{dates.forEach((date) {
List tracks = Globals.tracks.where((track) => track.trackCreated.toDate().day == date.day).toList();
slivers.add(makeHeader(summarize(tracks), tracks.length, date));
slivers.add(sliverListDay(tracks));
});}
return slivers;
}

Answer 1

You need to wrap it like this: _SliverAppBarDelegate -> Container -> ClipRect -> OverflowBox -> ListTile
delegate: _SliverAppBarDelegate(
minHeight: 0.0,
maxHeight: 80.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey[400]),
color: Colors.white
),
child: ClipRect(
child: OverflowBox(
alignment: Alignment.topLeft,
maxHeight: 80.0,
child: ListTile(
leading: CircleAvatar(
...