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

Popular posts from this blog

Second GET API Calling with Bloc simple Example in Flutter

Stack Container Scrollable Card widget UI with Custom Widget

Pagination with Bloc Pattern in Flutter