Today in this post we are going to design an attractive sign up page using flutter. Flutter is basically an open source UI SDK launched by Google. Today we are going to create a login sign up page with input fields for name, mobile number, email and referral.You can simply copy the code given below by us and after copying you can paste it in your project. And after pasting you can design your own attractive sign up page.
RegisterScreen.dart
import 'package:flutter/material.dart';
import 'package:stocks/util/bluecolor.dart';
import 'Login.dart';
import 'otp.dart';
class RegisterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: RegistersScreen(),
);
}
}
class RegistersScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffFCFCFC),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 30),
SizedBox(height: 50),
Text("Sign Up", style: TextStyle(color : MyColors.blue,fontSize: 30, fontFamily: "Roboto Flex", fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Text("Information is secured with your account", style: TextStyle(fontSize: 16, fontFamily: "Roboto Flex", color: Color(0xff000000))),
SizedBox(height: 20),
SizedBox(height: 20),
Text("Name",style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey, width: 0.3),// Background color
borderRadius: BorderRadius.circular(8), // Rounded corners
),
child: TextField(
decoration: InputDecoration(
hintText: "Name",
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.person_outline_outlined),
border: InputBorder.none, // Removes border
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10), // Adjusts padding
),
),
),
SizedBox(height: 20),
Text("Mobile",style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey, width: 0.3),// Background color
borderRadius: BorderRadius.circular(8), // Rounded corners
boxShadow: [
],
),
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: "Mobile",
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.call_outlined),
border: InputBorder.none, // Removes border
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10), // Adjusts padding
),
),
),
SizedBox(height: 20),
Text("Email",style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey, width: 0.3),// Background color
borderRadius: BorderRadius.circular(8), // Rounded corners
),
child: TextField(
decoration: InputDecoration(
hintText: "Email",
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.mail_outline_rounded),
border: InputBorder.none, // Removes border
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10), // Adjusts padding
),
),
),
SizedBox(height: 20),
Text("Referral (If any)",style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey, width: 0.3),// Background color
borderRadius: BorderRadius.circular(8), // Rounded corners
),
child: TextField(
decoration: InputDecoration(
hintText: "Referral id",
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.mail_outline_rounded),
border: InputBorder.none, // Removes border
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10), // Adjusts padding
),
),
),
SizedBox(height: 20),
Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => OtpScreen()),
);
},
child: Text("Sign Up",style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xff356DFA),
foregroundColor: Colors.white,
minimumSize: Size(double.infinity, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child: Divider()),
Text(" Already have an account ? " ,style: TextStyle(color: Color(0xff9C9A9A)),),
Expanded(child: Divider()),
],
),
SizedBox(height: 10),
Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginsScreen()),
);
},
child: Text(
"Login Here",
style: TextStyle(
color: Color(0xff356DFA),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(height: 10),
Row(
children: [
Text("By signing up, you agree to out", style: TextStyle(color: Colors.grey, fontSize: 11,)),
Text(" terms & Conditions", style: TextStyle(color: Color(0xff356DFA), fontSize: 10,)),
Text("and", style: TextStyle(color: Colors.grey, fontSize: 10,)),
Text(" Privacy Policy", style: TextStyle(color: Color(0xff356DFA), fontSize: 10,)),
]
),
],
),
),
);
}
}
Code Explanation
- The Material.Dart package has been imported into Flutter.
- A class named Register:Screen is created inside which the scaffold is placed.
- The body is created in the scaffold. The behavior of the body is kept Singlechildscrollview.
- Text is taken inside the body and all the text is decorated.
- Text fields have been taken inside different containers, within which different fields have been created.
- An elevated button has been taken. Its name is Sign Up.
Output
0 Comments