Last active
December 7, 2019 17:38
-
-
Save sfshaza2/0ce13ec7bc16e1307cabfe18e4f40cb8 to your computer and use it in GitHub Desktop.
Completion of step 2: signin example
This file contains 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/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: Scaffold( | |
backgroundColor: Colors.grey[200], | |
body: SignUpScreen(), | |
), | |
); | |
} | |
} | |
class SignUpScreen extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Center( | |
child: SizedBox( | |
width: 400, | |
child: Card( | |
child: SignUpForm(), | |
), | |
), | |
); | |
} | |
} | |
class SignUpForm extends StatefulWidget { | |
@override | |
_SignUpFormState createState() => _SignUpFormState(); | |
} | |
class _SignUpFormState extends State<SignUpForm> | |
with SingleTickerProviderStateMixin { | |
bool _formCompleted = false; | |
// STEP 3: Add an AnimationController and add the | |
// AnimatedBuilder with a LinearProgressIndicator to the Column | |
@override | |
void initState() { | |
super.initState(); | |
} | |
void _showWelcomeScreen() { | |
Navigator.of(context) | |
.push(MaterialPageRoute(builder: (context) => WelcomeScreen())); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
SignUpFormBody( | |
onProgressChanged: (progress) { | |
setState(() { | |
_formCompleted = progress == 1; | |
}); | |
}, | |
), | |
Container( | |
height: 40, | |
width: double.infinity, | |
margin: EdgeInsets.all(12), | |
child: FlatButton( | |
color: Colors.blue, | |
textColor: Colors.white, | |
onPressed: _formCompleted ? _showWelcomeScreen : null, | |
child: Text('Sign up'), | |
), | |
), | |
], | |
); | |
} | |
} | |
class SignUpFormBody extends StatefulWidget { | |
final ValueChanged<double> onProgressChanged; | |
SignUpFormBody({ | |
@required this.onProgressChanged, | |
}) : assert(onProgressChanged != null); | |
@override | |
_SignUpFormBodyState createState() => _SignUpFormBodyState(); | |
} | |
class _SignUpFormBodyState extends State<SignUpFormBody> { | |
static const EdgeInsets padding = EdgeInsets.all(8); | |
final TextEditingController emailController = TextEditingController(); | |
final TextEditingController phoneController = TextEditingController(); | |
final TextEditingController websiteController = TextEditingController(); | |
List<TextEditingController> get controllers => | |
[emailController, phoneController, websiteController]; | |
@override | |
void initState() { | |
super.initState(); | |
controllers.forEach((c) => c.addListener(() => _updateProgress())); | |
} | |
double get _formProgress { | |
var progress = 0.0; | |
for (var controller in controllers) { | |
if (controller.value.text.isNotEmpty) { | |
progress += 1 / controllers.length; | |
} | |
} | |
return progress; | |
} | |
void _updateProgress() { | |
widget.onProgressChanged(_formProgress); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Padding( | |
padding: padding, | |
child: Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Padding( | |
padding: padding, | |
child: Text('Sign up', style: Theme.of(context).textTheme.display1), | |
), | |
SignUpField( | |
hintText: 'E-mail address', | |
controller: emailController, | |
), | |
SignUpField( | |
hintText: 'Phone number', | |
controller: phoneController, | |
), | |
SignUpField( | |
hintText: 'Website', | |
controller: websiteController, | |
), | |
], | |
), | |
); | |
} | |
} | |
class SignUpField extends StatelessWidget { | |
final String hintText; | |
final TextEditingController controller; | |
SignUpField({ | |
@required this.hintText, | |
@required this.controller, | |
}); | |
@override | |
Widget build(BuildContext context) { | |
return Padding( | |
padding: EdgeInsets.all(8), | |
child: TextFormField( | |
decoration: InputDecoration(hintText: hintText), | |
controller: controller, | |
), | |
); | |
} | |
} | |
class WelcomeScreen extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: Center( | |
child: Text('Welcome!', style: Theme.of(context).textTheme.display3), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment