Skip to content

[BUG] Jumpy header inside CustomScrollView with center key #67

Description

@Areopagitics

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

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<Page extends BasePage> extends State<Page> {
  String screenName();
}
class CalendarPage extends BasePage {
  CalendarPage({Key? key}) : super(key: key);
  @override
  _CalendarPageState createState() => _CalendarPageState();
}


class _CalendarPageState extends BaseState<CalendarPage>{
  _CalendarPageState();


  Key centerKey = ValueKey<String>('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),
        ],
      );
  }
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions