Remove Widget when NestedScrollView reach end of screen

Viewed 31

Hi I'm new to flutter and I tried to use NestedScrollView Widget to show my widget. I've managed to create the NestedScrollView widget and I wanted to remove my bottom sheet when the scrollView already reach the end of the screen. Is there any way that I can achieve it ? Thanks Before

Here's my code:

NestedScrollView(
    headerSliverBuilder: (context, isScrolled) {
      return [
        SliverPersistentHeader(
          pinned: true,
          floating: false,
          delegate: ChooseUsersHeaderDelegate(
            widgetList: Container(
              color: Colors.white,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  /// Search Box
                  buildSearch(),
                ],
              ),
            ),
            minHeight: selectedContactId.isNotEmpty ? 135 : 60,
            maxHeight: selectedContactId.isNotEmpty ? 135 : 60,
            parentContext: context,
          ),
        ),
      ];
    },
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
        Text(
          'allContacts',
          style: GoogleFonts.montserrat(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: primaryColor,
            fontStyle: FontStyle.normal,
          ),
        ).tr(),

        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            isLoading
                ? ReusableLoadingContact()
                : NotificationListener<
                        OverscrollIndicatorNotification>(
                    onNotification: (overScroll) {
                      overScroll.disallowIndicator();
                      return true;
                    },
                    child: buildWidget(context, 'contacts')),
          ],
        ),
      ],
    ),
  ),

bottomSheet: Container(
        height: 40,
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: FractionalOffset.bottomCenter,
            colors: <Color>[
              Colors.white.withOpacity(0.1),
              Colors.white,
            ],
            stops: [0, 1],
          ),
        ),
      ),
1 Answers

Change your StatelessWidget into StatefulWidget you need to make ScrollController

class MyScroll extends StatefulWidget {
  MyScroll({Key key}) : super(key: key);

  @override
  State<MyScroll> createState() => _MyScrollState();
}

class _MyScrollState extends State<MyScroll> {
  final ScrollController _scrollController = ScrollController();
  bool isEnd = false;

  @override
  void initState() {
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        setState(() {
          isEnd = true;
        });
      } else {
        setState(() {
          isEnd = false;
        });
      }
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController, // pass scrollController to scrollview
        headerSliverBuilder: (context, isScrolled) {
          return [
            SliverPersistentHeader(
              pinned: true,
              floating: false,
              delegate: ChooseUsersHeaderDelegate(
                widgetList: Container(
                  color: Colors.white,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      /// Search Box
                      buildSearch(),
                    ],
                  ),
                ),
                minHeight: selectedContactId.isNotEmpty ? 135 : 60,
                maxHeight: selectedContactId.isNotEmpty ? 135 : 60,
                parentContext: context,
              ),
            ),
          ];
        },
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  'allContacts',
                  style: GoogleFonts.montserrat(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: primaryColor,
                    fontStyle: FontStyle.normal,
                  ),
                ).tr(),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    isLoading
                        ? ReusableLoadingContact()
                        : NotificationListener<OverscrollIndicatorNotification>(
                            onNotification: (overScroll) {
                              overScroll.disallowIndicator();
                              return true;
                            },
                            child: buildWidget(context, 'contacts')),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
      bottomSheet: isEnd // check if its end
          ? null
          : Container(
              height: 40,
              width: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: <Color>[
                    Colors.red.withOpacity(0.1),
                    Colors.white,
                  ],
                  stops: [0, 1],
                ),
              ),
            ),
    );
  }
}

result is like:

result

instead of ternary operators you can use Visibility too

Related