Sign Up Screen Simple UI in Flutter
import "package:flutter/material.dart";
import "package:praxware_tasks/Custom_Widget/CustomWidget.dart";
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Sign Up Screen",
debugShowCheckedModeBanner: false,
theme: ThemeData(
appBarTheme: const AppBarTheme(
backgroundColor: Colors.white,
centerTitle: true,
),
),
home: SignUpScreenUiTaskTutorial(),
);
}
}
class SignUpScreenUiTaskTutorial extends StatelessWidget {
SignUpScreenUiTaskTutorial({super.key});
TextEditingController nameController = TextEditingController();
TextEditingController emailController = TextEditingController();
TextEditingController mobileController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
return FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
appBar: AppBar(
leading: const Icon(Icons.arrow_back),
),
body: Center(
child: SizedBox(
width: 350.0,
child: Column(
children: <Widget>[
const SizedBox(height: 30.0),
Container(
alignment: Alignment.centerLeft,
child: const Text(
"Sign Up",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
fontSize: 25.0),
),
),
const SizedBox(height: 30.0),
UiHelper.customTextFormField(
nameController, 30.0, "Name", TextInputType.name),
const SizedBox(height: 20.0),
UiHelper.customTextFormField(
emailController, 30.0, "Email", TextInputType.emailAddress),
const SizedBox(height: 20.0),
UiHelper.customTextFormField(
mobileController, 30.0, "Mobile", TextInputType.number),
const SizedBox(height: 20.0),
UiHelper.customTextFormField(passwordController, 30.0,
"Password", TextInputType.visiblePassword),
const SizedBox(height: 50.0),
UiHelper.customElevatedButton("Sign Up", () {}, Colors.indigo,
300.0, 50.0, context, Colors.white, 20.0),
],
),
),
),
),
);
}
}
import "package:flutter/material.dart";
class UiHelper {
static customAppBar(String text) {
return AppBar(
title: Text(
text,
style: const TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
);
}
static customElevatedButton(
String text,
VoidCallback callback,
Color color,
double width,
double height,
BuildContext context,
Color color2,
double size) {
return ElevatedButton(
onPressed: callback,
style: ElevatedButton.styleFrom(
backgroundColor: color,
fixedSize: Size(width, height),
),
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.bold, color: color2, fontSize: size),
),
);
}
static customTextFormField(TextEditingController controller, double radius,
String text, TextInputType type) {
return TextFormField(
controller: controller,
keyboardType: type,
decoration: InputDecoration(
hintText: text,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(radius),
),
),
);
}
}
Comments
Post a Comment