Question 75004 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter PageView disable preview prev page

when scrolling i don’t want to show prev page,
i want to scroll directly to the next page.

(I DONT WANT TO SHOW 50% OF THE CURRENT PAGE AND 50% OF THE NEXT PAGE)

enter image description here

CODE :

  final _balancePageController = PageController(
    initialPage: 0,
  );


Container(
                width: 245,
                height: 256,
                child: PageView(
                  controller: _balancePageController,
                  children: [
                    BalanceWidget(
                      imagePath: 'assets/images/ic_home_balance_cash.png',
                      balance: 369.820,
                    ),
                    BalanceWidget(
                      imagePath:
                          'assets/images/ic_home_balance_restoration.png',
                      balance: 0,
                    ),
                    BalanceWidget(
                      imagePath: 'assets/images/ic_home_balance_medical.png',
                      balance: 0,
                    ),
                  ],
                ),
              ),-
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I used GestureDetector and detect swiping.

    Code:

    final _balancePageController = PageController(initialPage: 0);
int pageViewIndex = 0;
bool _isSwipeDetected = false;

GestureDetector(
  onPanUpdate: (details) {
    if (_isSwipeDetected) return;
    _isSwipeDetected = true;
    print(details.delta.dx);
    if (details.delta.dx < 0) {
      // right scroll
      if (pageViewIndex == 2) return;
        setState(() {
          pageViewIndex++;
        });
      } else {
        // left scroll
        if (pageViewIndex == 0) return;
        setState(() {
          pageViewIndex--;
        });
      }
      _balancePageController.animateToPage(
        pageViewIndex,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeIn,
      );
    },
    onPanEnd: (details) {
      _isSwipeDetected = false;
    },
    child: Container(
      width: 245,
      height: 256,
      child: PageView(
        controller: _balancePageController,
        onPageChanged: (value) => setState(() {
          pageViewIndex = value;
        }),
        // stop scrolling
        physics: NeverScrollableScrollPhysics(),
        children: [
          BalanceWidget(
            imagePath: 'assets/images/ic_home_balance_cash.png',
            balance: 369.820,
          ),
          BalanceWidget(
            imagePath: 'assets/images/ic_home_balance_restoration.png',
            balance: 0,
          ),
          BalanceWidget(
            imagePath: 'assets/images/ic_home_balance_medical.png',
            balance: 0,
          ),
        ],
      ),
    ),
  ),

    Result:

    enter image description here

    In this way user can stop between 2 pages.

    maybe there is a better solution ?


  2. 0

    You can try setting the PageView’s PageScrollPhysics property.

    final _balancePageController = PageController(initialPage: 0);

Container(
  width: 245,
  height: 256,
  child: PageView(
    controller: _balancePageController,
    physics: PageScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
    onPageChanged: (int page) {
      // Handle page changed event
    },
    children: [
      BalanceWidget(
        imagePath: 'assets/images/ic_home_balance_cash.png',
        balance: 369.820,
      ),
      BalanceWidget(
        imagePath: 'assets/images/ic_home_balance_restoration.png',
        balance: 0,
      ),
      BalanceWidget(
        imagePath: 'assets/images/ic_home_balance_medical.png',
        balance: 0,
      ),
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search