Simple demo for Registration in Flutter
Here's a step-by-step guide:
- Create a new Flutter project using your preferred IDE or by running the following command in your terminal:
flutter create registration_demo
In the
libfolder of your project, create a new file namedregister_screen.dart. This will be the screen where users can register.In
register_screen.dart, create a newStatefulWidgetnamedRegisterScreen.
import 'package:flutter/material.dart';
class RegisterScreen extends StatefulWidget {
@override
_RegisterScreenState createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Registration Screen'),
);
}
}
- Add a
TextFormFieldfor the user to enter their email address.
class _RegisterScreenState extends State<RegisterScreen> {
String _email = '';
@override
Widget build(BuildContext context) {
return Container(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email address',
),
keyboardType: TextInputType.emailAddress,
onChanged: (value) {
setState(() {
_email = value;
});
},
),
);
}
}
- Add a
TextFormFieldfor the user to enter their password.
class _RegisterScreenState extends State<RegisterScreen> {
String _email = '';
String _password = '';
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email address',
),
keyboardType: TextInputType.emailAddress,
onChanged: (value) {
setState(() {
_email = value;
});
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
),
obscureText: true,
onChanged: (value) {
setState(() {
_password = value;
});
},
),
],
),
);
}
}
- Add a
RaisedButtonto submit the registration form.
class _RegisterScreenState extends State<RegisterScreen> {
String _email = '';
String _password = '';
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email address',
),
keyboardType: TextInputType.emailAddress,
onChanged: (value) {
setState(() {
_email = value;
});
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
),
obscureText: true,
onChanged: (value) {
setState(() {
_password = value;
});
},
),
SizedBox(height: 16),
RaisedButton(
child: Text('Register'),
onPressed: () {
// TODO: Implement registration logic
},
),
],
),
);
}
}
Comments
Post a Comment