Created
July 31, 2019 14:19
-
-
Save jkmpariab/18962517075bf2c8c9d88677a74d1a2f to your computer and use it in GitHub Desktop.
pageview transition animation between pages stucks on curves.XXXIn that overshoot its bound
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/gestures.dart'; | |
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
home: LogInPage(), | |
); | |
} | |
} | |
class LogInPage extends StatefulWidget { | |
@override | |
_LogInPageState createState() => _LogInPageState(); | |
} | |
class _LogInPageState extends State<LogInPage> { | |
PageController _pageController; | |
@override | |
void initState() { | |
super.initState(); | |
_pageController = PageController(); | |
} | |
@override | |
void dispose() { | |
_pageController.dispose(); | |
super.dispose(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: PageView( | |
children: <Widget>[ | |
_SignInPane(onTapToSignUp: _onTapToSignUp), | |
_SignUpPane(onTapToSignIn: _onTapToSignIn), | |
], | |
controller: _pageController, | |
physics: NeverScrollableScrollPhysics(), | |
), | |
); | |
} | |
void _onTapToSignUp() async { | |
await _pageController.nextPage(duration: const Duration(milliseconds: 250), curve: Curves.elasticIn); | |
} | |
void _onTapToSignIn() async { | |
await _pageController.previousPage(duration: const Duration(milliseconds: 250), curve: Curves.easeOutBack); | |
} | |
} | |
// | |
// Sign-In pane | |
// | |
class _SignInPane extends StatefulWidget { | |
_SignInPane({Key key, @required this.onTapToSignUp}) | |
: assert(onTapToSignUp != null), | |
super(key: key); | |
final VoidCallback onTapToSignUp; | |
@override | |
_SignInPaneState createState() => _SignInPaneState(); | |
} | |
class _SignInPaneState extends State<_SignInPane> { | |
GlobalKey<FormState> _loginFormGlobalKey; | |
TextEditingController _usernameController; | |
TextEditingController _passwordController; | |
@override | |
void initState() { | |
super.initState(); | |
_loginFormGlobalKey = GlobalKey<FormState>(); | |
_usernameController = TextEditingController(); | |
_passwordController = TextEditingController(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return SingleChildScrollView( | |
child: Padding( | |
padding: EdgeInsets.symmetric(horizontal: 45.0), | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: EdgeInsets.only(top: 30.0), | |
child: Text('You should login to use this app'), | |
), | |
Padding( | |
padding: EdgeInsets.symmetric(vertical: 20.0), | |
child: CircleAvatar( | |
radius: 42.0, | |
backgroundColor: Theme.of(context).primaryColorDark, | |
foregroundColor: Colors.white, | |
child: Icon( | |
Icons.person, | |
size: 75.0, | |
), | |
), | |
), | |
Divider(), | |
Form( | |
key: _loginFormGlobalKey, | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: | |
EdgeInsets.symmetric(vertical: 8.0), | |
child: TextFormField( | |
controller: _usernameController, | |
validator: (str) { | |
if (str.trim().length < 5) return 'Username length is less than required!'; | |
return null; | |
}, | |
), | |
), | |
Padding( | |
padding: | |
EdgeInsets.symmetric(vertical: 8.0), | |
child: TextFormField( | |
controller: _passwordController, | |
obscureText: true, | |
validator: (str) { | |
if (str.trim().length < 8) return 'Password length is less than required!'; | |
return null; | |
}, | |
), | |
), | |
], | |
), | |
), | |
Padding( | |
padding: EdgeInsets.symmetric(vertical: 16.0), | |
child: SizedBox( | |
width: double.infinity, | |
child: RaisedButton( | |
child: Text('submit'), | |
onPressed: () {}, | |
), | |
), | |
), | |
RichText( | |
text: TextSpan( | |
style: TextStyle(fontSize: 15.0), | |
children: <InlineSpan>[ | |
TextSpan( | |
text: 'You have no account? ', | |
style: TextStyle(color: Colors.grey[700])), | |
TextSpan( | |
text: 'sign up', | |
style: TextStyle( | |
color: Theme.of(context).primaryColor, | |
), | |
recognizer: TapGestureRecognizer() | |
..onTap = widget.onTapToSignUp, | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} | |
// | |
// Sign-Up pane | |
// | |
class _SignUpPane extends StatefulWidget { | |
_SignUpPane({Key key, @required this.onTapToSignIn}) | |
: assert(onTapToSignIn != null), | |
super(key: key); | |
final VoidCallback onTapToSignIn; | |
@override | |
_SignUpPaneState createState() => _SignUpPaneState(); | |
} | |
class _SignUpPaneState extends State<_SignUpPane> { | |
GlobalKey<FormState> _loginFormGlobalLey; | |
@override | |
void initState() { | |
super.initState(); | |
_loginFormGlobalLey = GlobalKey<FormState>(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return SingleChildScrollView( | |
child: Padding( | |
padding: EdgeInsets.symmetric(horizontal: 45.0), | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: EdgeInsets.only(top: 30.0), | |
child: Text('Create new account'), | |
), | |
Divider(), | |
Form( | |
key: _loginFormGlobalLey, | |
child: Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: | |
EdgeInsets.symmetric(vertical: 8.0), | |
child: TextFormField(), | |
), | |
Padding( | |
padding: | |
EdgeInsets.symmetric(vertical: 8.0), | |
child: TextFormField( | |
obscureText: true, | |
), | |
), | |
Padding( | |
padding: | |
EdgeInsets.symmetric(vertical: 8.0), | |
child: TextFormField( | |
obscureText: true, | |
), | |
), | |
], | |
), | |
), | |
Padding( | |
padding: EdgeInsets.symmetric(vertical: 16.0), | |
child: SizedBox( | |
width: double.infinity, | |
child: RaisedButton( | |
child: Text('submit'), | |
onPressed: () {}, | |
), | |
), | |
), | |
RichText( | |
text: TextSpan( | |
style: TextStyle(fontSize: 15.0), | |
children: <InlineSpan>[ | |
TextSpan( | |
text: 'You have an account? ', | |
style: TextStyle(color: Colors.grey[700])), | |
TextSpan( | |
text: 'sign in', | |
style: TextStyle( | |
color: Theme.of(context).primaryColor, | |
), | |
recognizer: TapGestureRecognizer() | |
..onTap = widget.onTapToSignIn, | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment