Simple Forget and Register Screen UI Design with Flutter
If you want to learn about the Flutter Simple Forget and Register Screen UI Design Tutorial, in this tutorial video, I explain Simple Forget Screen and Register Screen Design using Flutter. This screen design is required for user authentication in the Flutter application. This video is mainly focused on design, but in the next video, I will discuss how to use a controller and how to use RX variables for value changes on the screen.
You can check the source code for further information: Source Code
register.screen.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controllers/register.controller.dart';
class RegisterScreen extends GetView<RegisterController> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('screen_register'.tr),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'screen_register'.tr,
style: const TextStyle(fontSize: 20),
),
const SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(
border: const OutlineInputBorder(),
prefixIcon: const Icon(Icons.face),
hintText: 'Input Full name',
labelText: 'field_fullname'.tr,
),
),
const SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(
border: const OutlineInputBorder(),
prefixIcon: const Icon(Icons.person),
hintText: 'Input Email',
labelText: 'field_email'.tr,
),
),
const SizedBox(
height: 18,
),
TextFormField(
obscureText: true,
decoration: InputDecoration(
border: const OutlineInputBorder(),
prefixIcon: const Icon(Icons.security),
hintText: 'Input Password',
labelText: 'field_password'.tr,
suffixIcon: IconButton(
icon: const Icon(Icons.remove_red_eye),
onPressed: () {},
),
),
),
const SizedBox(
height: 18,
),
ElevatedButton(
onPressed: () {},
child: Text('button_register'.tr),
),
],
),
),
);
}
}forget.screen.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controllers/forget.controller.dart';
class ForgetScreen extends GetView<ForgetController> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('screen_forget'.tr),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'screen_forget'.tr,
style: const TextStyle(fontSize: 20),
),
const SizedBox(
height: 8,
),
TextFormField(
decoration: InputDecoration(
border: const OutlineInputBorder(),
prefixIcon: const Icon(Icons.person),
hintText: 'Input Email',
labelText: 'field_username'.tr,
),
),
const SizedBox(
height: 18,
),
ElevatedButton(
onPressed: () {},
child: Text('button_reset_password'.tr),
),
],
),
),
);
}
}If you want to learn about loging authentication process with Flutter, check the tutorial. check course syllabus if you are interested in real-time project development
