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.
Scroll down to the end to get the full code demo. A PageView widget allows the user to swipe/transition between different screens in your app. All you need to set it up are a PageViewController and a PageView. You can use PageController to control which page is visible in the view.
Snapping Page ScrollA plugin that acts similar to a PageView but either snaps to the closest page or scrolls multiple pages and then snaps, based on how fast the user scrolls.
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
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With