0

Expected implementation of the question is similar to Instagram stories. There exists a package called story_view in flutter which does the same but it's not possible to add a Pageview as child as per my understanding. So, any way this can be implemented in flutter ?

blaze bnayak
  • 123
  • 1
  • 11

1 Answers1

2

You can use a GestureDetector and PageController on your page view to achieve this. Where GestureDetector is used to get the tapped position of the screen and to call the page controller to go forward or backwards depending on that position.

Wrap PageView(controller: _pageController,...) with GestureDetector and then define onTapDown something like the below:


GestureDetector(
  onTapDown: (TapDownDetails details) {
    final RenderBox box = context.findRenderObject();
    final localOffset = box.globalToLocal(details.globalPosition);
    final x = localOffset.dx;

    // if x is less than halfway across the screen and user is not on first page 
    if(x < box.size.width / 2){
      //   _pageController.previousPage(...)
    }else{
      // Assume the user tapped on the other half of the screen and check they are not on the last page
      //  _pageController.nextPage(...)
    }

  },
  child: PageView(
    controller: _pageController,
    ...
  )
)

As you can see I haven't fully implemented a solution but this should be what you want

blaze bnayak
  • 123
  • 1
  • 11
Giles Correia Morton
  • 824
  • 6
  • 14
  • Thank you so much will try this on my code. Appreciate your answer. – blaze bnayak Jun 18 '20 at 11:30
  • 1
    No problem I hope it helps! You might also need to check that `_pageController` has attached to the page view before doing previous/next page. You can check this with `_pageController.hasClients` – Giles Correia Morton Jun 18 '20 at 11:33
  • i wonder how can i write step definition for this feature. Is there any way to make flutter world driver to tap on these specific areas ? – blaze bnayak Jun 24 '20 at 05:07
  • 1
    I'm sorry I don't know enough about flutter world driver to help. In terms of steps displayed to the user you could a package like https://pub.dev/packages/showcaseview – Giles Correia Morton Jun 24 '20 at 09:35