fluttercommunity / fluttercommunity/flutter_sticky_headers

[BUG] Jumpy header inside CustomScrollView with center key

Open
#67 9 comments 2 reactions 0 assignees View on GitHub
Dominant language
Dart
Stars
1.2k
Forks
130
PR merge metrics
No merged PRs in 30d

Description

When using StickyHeader inside a CustomScrollView with center key, the header immediately before the center header month jumps around; all the other header months have no problems. A plug and play ready example is found below. If there is an easy way to fix the problem, it would be much appreciated. I have tried countless other options...I am really surprised the sticky header is not included with the flutter CustomScrollView widgets.

![Peek 2022-10-22 13-18](https://user-images.githubusercontent.com/24683841/197361080-d48e9ff6-b9d5-40e3-8c98-ef7e6bd29094.gif)

```
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';

Map _months = {
1:'January',
2:'February',
3:'March',
4:'April',
5:'May',
6:'June',
7:'July',
8:'August',
9:'September',
10:'October',
11:'November',
12:'December',
};

abstract class BasePage extends StatefulWidget {
BasePage({Key? key}) : super(key: key);
}

abstract class BaseState extends State {
String screenName();
}
class CalendarPage extends BasePage {
CalendarPage({Key? key}) : super(key: key);
@override
_CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends BaseState{
_CalendarPageState();

Key centerKey = ValueKey('center');
var date = DateTime.now();

Widget monthBuilder (BuildContext context, int plusMinus){
int count = (date.month - 13) * -1;
if(plusMinus==-1){count=date.month-1;}
return SliverList(
key: plusMinus==1 ? centerKey:null,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
int month=date.month+index;
if(plusMinus==-1){month=date.month-1+(-1*index);}
return StickyHeader(
header: Container(
color: Colors.brown,
padding: EdgeInsets.symmetric(vertical: 12.0),
alignment: Alignment.center,
child: Text('${_months[month]}',
style: Theme.of(context).textTheme.headline2,
),
),
content: ListView.builder(
shrinkWrap: true,
itemCount: DateTime(date.year,month+1,0).day,//check last day of month for days,
itemBuilder: (context, int index) {
return Column(children: [
Divider(),
TextButton( onPressed: () { },
child: Text('Data'),),
]);
},
),
);
},
childCount: count,
)
);
}

@override
String screenName() => "Calendar ${date.year}";

@override
Widget build(BuildContext context) {
return CustomScrollView(
center: centerKey,
slivers: [
monthBuilder(context, -1),
monthBuilder(context, 1),
],
);
}
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.