How To Scroll To The Next Page PageView Flutter

user_8390502 0
Viewed 9760

I have a horizontal form i built using page view builder. I want to know how I can scroll to the next page without using the scroll physics. Here is my code

import 'package:flutter/material.dart';
import 'package:flutter_repo/screens/login.dart';
import 'package:flutter_repo/utils/beziercontainer.dart';

class SignUpPage extends StatefulWidget {
    SignUpPage({Key key, this.title}) : super(key: key);

    final String title;

    @override
    _SignUpPageState createState() => _SignUpPageState();
 }

 class _SignUpPageState extends State<SignUpPage> {
     PageController pageController;


     @override
     void initState() { 
     pageController = PageController(initialPage: 0);

     super.initState();

  }

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

   @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: 
    );
  }

   onNext(){
    if (pageController.hasClients) {
    pageController.animateToPage(2, duration: Duration(milliseconds: 300), curve: Curves.easeIn); 
  }
 }

 onComplete(){

 }

 Widget _registrationFields() {
    return PageView(
    physics: NeverScrollableScrollPhysics(),
    controller: pageController,
    children: <Widget>[
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 14.0),
      child: Column(
        children: <Widget>[
          _entryField("First Name"),
          SizedBox(
            height: 20,
          ),
          _submitButton(text: 'Continue', function: onNext())
        ],
      ),
    ),
     Padding(
       padding: const EdgeInsets.symmetric(horizontal: 14.0),
       child: Column(
        children: <Widget>[
          _entryField("Last Name"),
          SizedBox(
            height: 20,
          ),
          _submitButton(text: 'Continue', function: onNext())
        ],
    ),
     ),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 14.0),
      child: Column(
        children: <Widget>[
          _entryField("Email Address"),
           SizedBox(
            height: 20,
          ),
           _submitButton(text: 'Continue', function: onNext())
        ],
      ),
    ),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 14.0),
      child: Column(
        children: <Widget>[
          _entryField("Password", isPassword: true),
          SizedBox(
              height: 20,
            ),
             _submitButton(text: 'Continue', function: onNext())
        ],
      ),
    ),
     Padding(
      padding: const EdgeInsets.symmetric(horizontal: 14.0),
      child: Column(
        children: <Widget>[
          _entryField("Confirm Password", isPassword: true),
          SizedBox(
              height: 20,
            ),
             _submitButton(text: 'Continue', function: onNext())
        ],
      ),
    ),
      Padding(
      padding: const EdgeInsets.symmetric(horizontal: 14.0),
      child: Column(
        children: <Widget>[
          _entryField("Set PIN", isPassword: true),
          SizedBox(
              height: 20,
            ),
             _submitButton(text: 'Register', function: onNext())
        ],
      ),
    ),
  ],
);
}

}

i want to animate to the next page on clicking the button. But it doesn't work at all. How can i make it work? Right now it does nothing. I have abstracted some of the unnecessary codes away for brevity.

flutter
1 Answers

Your code has too many variables and methods you aren't sharing for us to re-use. So I've created an example of changing pages programatically:

class PageView60672934 extends StatefulWidget {
  @override
  _PageView60672934State createState() => _PageView60672934State();
}

class _PageView60672934State extends State<PageView60672934> {
  PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        physics: NeverScrollableScrollPhysics(),
        controller: _pageController,
        children: <Widget>[
          Center(
            child: Text('Page 1'),
          ),
          Center(
            child: Text('Page 2'),
          ),
          Center(
            child: Text('Page 3'),
          ),
        ],
      ),
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            onPressed: previousPage,
            child: Text('Previous'),
          ),
          RaisedButton(
            onPressed: nextPage,
            child: Text('Next'),
          )
        ],
      ),
    );
  }

  void nextPage(){
    _pageController.animateToPage(_pageController.page.toInt() + 1,
      duration: Duration(milliseconds: 400),
      curve: Curves.easeIn
    );
  }

  void previousPage(){
    _pageController.animateToPage(_pageController.page.toInt() -1,
      duration: Duration(milliseconds: 400),
      curve: Curves.easeIn
    );
  }
}
user_10030590
Related