letsar / flutter_sticky_header

Flutter implementation of sticky headers for sliver
MIT License
907 stars 174 forks source link

Header Cut-off Half Way #40

Open leemuljadi opened 4 years ago

leemuljadi commented 4 years ago

Hi Letsar,

Thanks for making such a wondeful and useful package for sliver! I want to depent on this package for my project but a bit stuck figuring out why the sticky head is being cut-off underneath my sliverpersistentheader (see image below). Could you please help how to work this out so it shows the full header not cut halfway? Thanks in advance! image Code:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
import '../shared_props.dart';

Widget buildCustomScrollView( ) {
  return CustomScrollView(slivers: _buildSlivers(context));
      },
    ),
  );
}

List<Widget> _buildSlivers(BuildContext context) {
  List<Widget> slivers = List<Widget>();
  int i = 0;

  slivers.add(SliverAppBar(
    backgroundColor: AppColor.primary,
    stretch: true,
    automaticallyImplyLeading: true,
    title: Text('Food'),
    pinned: true,
  ));

  slivers.addAll(_buildHeaderBuilderLists(context, i, i += 5));
  return slivers;
}

List<Widget> _buildHeaderBuilderLists(
    BuildContext context, int firstIndex, int count) {
  return List.generate(count, (sliverIndex) {
    sliverIndex += firstIndex;

    return SliverStickyHeaderBuilder(
      builder: (context, state) =>
          _buildAnimatedHeader(context, sliverIndex, state),

      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('$sliverIndex'),
            ),
            title: Text('List tile #$i'),
          ),
          childCount: 4,
        ),
      ),
    );
  });
}

Widget _buildAnimatedHeader(
    BuildContext context, int index, SliverStickyHeaderState state) {
  return GestureDetector(
    onTap: () =>
        Scaffold.of(context).showSnackBar(SnackBar(content: Text('$index'))),
    child: Container(
      height: AppScreen.s85,
      color: (state.isPinned ? Colors.pink : Colors.lightBlue)
          .withOpacity(1.0 - state.scrollPercentage),
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      alignment: Alignment.centerLeft,
      child: Text(
        'Header #$index',
        style: TextStyle(color: Colors.white),
      ),
    ),
  );
}
letsar commented 2 years ago

Can you test with the latests version?