kspo / super_cupertino_navigation_bar

This package offers a collapsible app bar along with an attractive search bar animation, enhancing the visual appeal of your Flutter app with an iOS-inspired design. This package is versatile, allowing complete customization, and it seamlessly works on both iOS and Android platforms.
https://pub.dev/packages/super_cupertino_navigation_bar
MIT License
67 stars 9 forks source link

How to prevent overscrolling of screen even if there's a not so much of elements in viewport? #6

Open Nurik7 opened 10 months ago

Nurik7 commented 10 months ago

I've made small explanation of what I have and what I'm expecting

https://github.com/kspo/super_cupertino_navigation_bar/assets/20270296/2e949c35-95c9-4b00-855d-bd5bc4d26eb7

here's the code of actual Example Widget:

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          CupertinoSliverNavigationBar(
            largeTitle: Text("Example screen"),
          ),
          SliverList.builder(
            itemBuilder: (context, index) {
              return Container(
                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                child: const Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Icon(
                      CupertinoIcons.check_mark_circled,
                      color: CupertinoColors.systemIndigo,
                    ),
                    SizedBox(
                      width: 15,
                    ),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Opacity(opacity: 0.5, child: Text("kspo/super_cupertino_navigation_bar")),
                          SizedBox(
                            height: 5,
                          ),
                          Text("Placeholder text offset when scaling up system accessibility text size"),
                          SizedBox(
                            height: 5,
                          ),
                          Opacity(
                            opacity: 0.5,
                            child: Text(
                              "@kspo, actually, if you have no urgency with your project,",
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              );
            },
            itemCount: 1,
          ),
        ],
      ),
    );
  }
}
JaidynBluesky commented 10 months ago

+1 for this. This is a small, but quite noticeable behaviour that native iOS has.

thisisanmolkumar commented 5 months ago

Did anyone find a solution for this?

techouse commented 3 months ago

Did anyone find a solution for this?

Not a solution, but a workaround.

Create a ScrollController and allow scrolling beyond 0 only when there's a certain number of elements, i.e.

final ScrollController _scrollController = ScrollController();

/// These are arbitrary values
/// Edit this method according to your needs
void _fixOverscroll() {
  if (_scrollController.hasClients) {
    if (_itemCount <= 1) {
      if (_scrollController.offset > 0) {
        _scrollController.jumpTo(0);
      }
    } else if (_itemCount <= 2) {
      if (_scrollController.offset > 60) {
        _scrollController.jumpTo(60);
      }
    } else if (_itemCount <= 3) {
      if (_scrollController.offset > 180) {
        _scrollController.jumpTo(180);
      }
    }
  }
}

@override
void initState() {
  super.initState();
  _scrollController.addListener(_fixOverscroll);
}

@override
void dispose() {
  _scrollController.removeListener(_fixOverscroll);
  _scrollController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  // stuff
}
esentis commented 2 months ago

+1 This, plus the refresh indicator, are the two things that need to be implemented.