Trying to implement parallax scroll view in flutter but its is not reflecting in the UI

111 Views Asked by At

I am trying to implement a parallax effect in the flutter web and have followed up the procedure to bring that effect in it but it seems it is not reflecting in the UI as expected.

I tried adding all the necessary stuffs but still the effect is not showing up. I added all the positioned widgets, declared variables as topOne and topTwo, added the notification listener.

Here's my code snippet:

    body: SingleChildScrollView(
            child: NotificationListener(
              onNotification: (v) {
                if (v is ScrollUpdateNotification) {
                  setState(() {
                    topOne = topOne - v.scrollDelta / 3;
                    topTwo = topTwo - v.scrollDelta / 1;
                  });
                }
              },
              child: SafeArea(
                child: Column(
                  children: [
                    Stack(
                      children: [

                        NavBar(
                          h: h / 1.2,
                          w: w / 1,
                          sel0: false,
                          sel1: false,
                          sel2: true,
                          sel3: false,
                          sel4: false,
                        )
                      ],
                    ),
                    SizedBox(
                      height: h / 12,
                    ),
                    Container(
                      height: h / 1,
                      width: w / 1,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Colors.transparent,
                              Colors.grey[100],
                              AppColors.getWhite(),
                            ]),
                      ),
                      child: Stack(
                        children: [
                          Positioned(
                            top: 30,
                            left: 30,
                            child: Text(
                              'F L EX',
                              style:
                                  TextStyle(fontSize: 500, color: Colors.white),
                            ),
                          ),
                          Positioned(
                            top: topOne, //I wanted this to move in the normal speed
                            left: 100,
                            child: Container(
                              height: h / 1.1,
                              width: w / 1.2,
                              decoration: BoxDecoration(color: Colors.white,
                                  // borderRadius: BorderRadius.circular(8),
                                  boxShadow: [
                                    BoxShadow(
                                      color: AppColors.getGrey(),
                                      blurRadius: 60.0,
                                    ),
                                  ]),
                            ),
                          ),
                          Positioned(
                            top: 80,
                            left: 150,
                            child: RotationTransition(
                              turns: new AlwaysStoppedAnimation(50 / 360),
                              child: Container(
                                height: h / 6,
                                width: w / 12,
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: AppColors.getGrey(), width: 4)),
                              ),
                            ),
                          ),
                          Positioned(
                            top: topTwo, // I wanted this to move slow than the above
                            left: 200,
                            child: Text(
                              'WE DO IT ALL.',
                              style: GoogleFonts.roboto(
                                  fontSize: 30,
                                  fontWeight: FontWeight.normal,
                                  color: AppColors.getBlack()),
                            ),
                          ),
0

There are 0 best solutions below