Flutter - Provider is taking too long to change boolean variable

Question

I am creating an app where i am using NotificationListener<UserScrollNotification> to change the boolean value on the basis of scroll direction... but when i scroll page for very first time all the content gets disappear for 2-3 seconds...I am using Provider.... Please help me...

Here i am trying to change boolean variable

NotificationListener<UserScrollNotification>(
                               onNotification: (notification) {
                              final ScrollDirection direction =
                                  notification.direction;

                              if (direction == ScrollDirection.reverse) {
                                value.changeVisiblity(true);
                              } else if (direction ==
                                  ScrollDirection.forward) {
                                value.changeVisiblity(false);
                              }

                              return false;
                            },

here is my provider class where boolean is defined

bool isVisible = false;
  changeVisiblity(bool value) {
    isVisible = value;
    notifyListeners();
  }

here is short video

Video

Answer 1

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

  final ValueNotifier<bool> isVisibility = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 3,
              child: ValueListenableBuilder(
                valueListenable: isVisibility,
                builder: (BuildContext context, bool value, Widget? child) {
                  return Column(
                    children: [
                      const Spacer(),
                      Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
                          child: AnimatedCrossFade(
                            firstChild: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(
                                  children: [
                                    value == false ? const Icon(Icons.food_bank_rounded) : const SizedBox(),
                                    const Text("Food"),
                                  ],
                                ),
                                Column(
                                  children: [
                                    value == false ? const Icon(Icons.people) : const SizedBox(),
                                    const Text("Fashion"),
                                  ],
                                ),
                                Column(
                                  children: [
                                    value == false ? const Icon(Icons.face) : const SizedBox(),
                                    const Text("Beauty"),
                                  ],
                                ),
                              ],
                            ),
                            secondChild: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: const [
                                Text("Food"),
                                Text("Fashion"),
                                Text("Beauty"),
                              ],
                            ),
                            crossFadeState: value == false ? CrossFadeState.showFirst : CrossFadeState.showSecond,
                            duration: const Duration(milliseconds: 300),
                          )),
                    ],
                  );
                },
              ),
            ),
            Expanded(
              flex: 7,
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return VisibilityDetector(
                      onVisibilityChanged: (info) {
                        if (info.visibleFraction < 1) {
                          isVisibility.value = true;
                        } else {
                          isVisibility.value = false;
                        }
                      },
                      key: ValueKey(index),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("$index"),
                      ),
                    );
                  } else {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text("$index"),
                    );
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}