In this tutorial, we’ll learn how to create this beautiful neumorphic Flutter registration screen UI design. The complete source code of the mentioned neumorphic Flutter registration screen design will be provided in the end.
Outline
- Introduction: Neumorphic Flutter Registration Screen UI Design
- Beautiful Neumorphic Flutter Registration Screen Design Source Code
- Conclusion
Introduction: Neumorphic Flutter Registration Screen UI Design
We’ve created this beautiful neumorphic Flutter registration screen UI design by using multiple Flutter widgets.
Click here if you want to learn and practically understand how to import and customize Flutter neumorphic.
Widgets that are used in creating this amazing neumorphic Flutter registration screen template design are listed below:
- Flutter Column Widget
- Flutter Row Widget
- Flutter Textfield Widget
- Flutter Gesture Detector Widget
- Flutter Inkwell Widget
- Flutter Text Widget
- Flutter Neumorphic
- Flutter Neumorphic Text
- Flutter Snackbar Widget
- Flutter Container Widget
- Flutter Single Child Scroll View Widget
- Flutter Padding Widget
- Flutter Flexible Widget
I’ve written detailed articles on the widgets listed above, you can check them out using the menu bar or search box of this site.
The complete source code of this beautiful neumorphic Flutter registration screen UI is available in the below section.
Try to understand how every Flutter widget is doing its role in this neumorphic Flutter registration screen UI design and implement this design from scratch.
You can paste this code inside your main file. Just import the Flutter neumorphic package in your pubspec.yaml file. Hope you’ll like it. Also, try to customize it according to your set of requirements.
Beautiful Neumorphic Flutter Registration Screen Design Source Code
import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Beautiful neumorphic Flutter Registration screen ui Form',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// primarySwatch: Colors.green,
accentColor: Colors.blue.shade100,
primaryColor: Colors.blue.shade100,
focusColor: Colors.blue.shade100,
cursorColor: Colors.white24),
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
@override
State<Homepage> createState() => _HomepageState();
}
// beautiful neumorphic flutter registration screen template
class _HomepageState extends State<Homepage> {
bool maleSelected = true;
bool femaleSelected = false;
bool isPasswordVisible = false;
bool isConfirmPasswordVisible = false;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
alignment: Alignment.center,
color: Colors.blue.shade100,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Neumorphic(
padding: EdgeInsets.all(13),
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(
BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -3,
lightSource: LightSource.topRight,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: Neumorphic(
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(
BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -3,
lightSource: LightSource.topRight,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: SizedBox(
height: 70,
width: 70,
child: Center(
child: NeumorphicText('Signup',
textStyle: NeumorphicTextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
style: NeumorphicStyle(
color: Colors.blue,
depth: 3,
intensity: .5,
)),
),
),
),
),
SizedBox(
height: 30.0,
),
usernameField(),
emailField(),
passwordField(),
confirmPasswordField(),
Neumorphic(
margin: EdgeInsets.symmetric(horizontal: 80)
.copyWith(top: 20.0),
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(
BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: Padding(
padding: EdgeInsets.only(top: 15, bottom: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
setState(() {
maleSelected = true;
femaleSelected = false;
});
},
child: Row(
children: [
Container(
height: 17,
width: 17,
alignment: Alignment.center,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.blue)),
child: maleSelected
? Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
)
: SizedBox()),
Text('Male',
style: TextStyle(
color: Colors.blue, fontSize: 13))
],
),
),
GestureDetector(
onTap: () {
setState(() {
femaleSelected = true;
maleSelected = false;
});
},
child: Row(
children: [
Container(
height: 17,
width: 17,
alignment: Alignment.center,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.blue)),
child: femaleSelected
? Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
)
: SizedBox()),
Text('Female',
style: TextStyle(
color: Colors.blue, fontSize: 13))
],
),
)
],
),
),
),
SizedBox(
height: 21,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Row(
children: [
Container(
height: 15,
width: 15,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue)),
child: Icon(
Icons.done,
color: Colors.blue,
size: 12,
),
),
SizedBox(width: 11),
Flexible(
child: Text(
'I accept to the terms and conditions.',
style:
TextStyle(color: Colors.blue, fontSize: 13),
),
)
],
),
),
SizedBox(height: 31),
registerButton(),
SizedBox(height: 13),
loginButton()
],
),
SizedBox(
height: 20.0,
)
],
),
),
),
),
);
}
// neumorphic flutter registration screen template
Widget usernameField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Neumorphic(
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
child: TextField(
style: TextStyle(color: Colors.blue, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter username',
hintStyle: TextStyle(color: Colors.blue, fontSize: 14),
),
),
),
));
}
Widget emailField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Neumorphic(
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
child: TextField(
style: TextStyle(color: Colors.blue, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter email',
hintStyle: TextStyle(color: Colors.blue, fontSize: 14),
),
),
),
));
}
// astounding neumorphic flutter registration screen ui design template
Widget passwordField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Neumorphic(
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
child: TextField(
obscureText: isPasswordVisible ? false : true,
style: TextStyle(color: Colors.blue, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
suffixIcon: Padding(
padding: EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
isPasswordVisible = !isPasswordVisible;
});
},
child: Icon(
isPasswordVisible
? Icons.visibility
: Icons.visibility_off,
color: Colors.blue,
size: 20,
),
),
),
hintText: 'Enter password',
hintStyle: TextStyle(color: Colors.blue, fontSize: 14),
),
),
),
));
}
// amazing neumorphic flutter registration screen design ui template
Widget confirmPasswordField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Neumorphic(
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white24),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
child: TextField(
obscureText: isConfirmPasswordVisible ? false : true,
style: TextStyle(color: Colors.blue, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
suffixIcon: Padding(
padding: EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
isConfirmPasswordVisible = !isConfirmPasswordVisible;
});
},
child: Icon(
isConfirmPasswordVisible
? Icons.visibility
: Icons.visibility_off,
color: Colors.blue,
size: 20,
),
),
),
hintText: 'Confirm password',
hintStyle: TextStyle(color: Colors.blue, fontSize: 14),
),
),
),
));
}
Widget registerButton() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Clicked')));
},
child: Neumorphic(
margin: EdgeInsets.symmetric(horizontal: 20),
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white54),
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
child: Text('Signup',
style: TextStyle(
color: Colors.blue,
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
);
}
Widget loginButton() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Clicked')));
},
child: Neumorphic(
margin: EdgeInsets.symmetric(horizontal: 20),
style: NeumorphicStyle(
color: Colors.blue.shade100,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0))),
depth: -4,
lightSource: LightSource.topLeft,
intensity: 1,
// oppositeShadowLightSource: true,
shadowLightColorEmboss: Colors.white54),
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
child: Text('Login',
style: TextStyle(
color: Colors.blue,
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
);
}
}Conclusion
To conclude this tutorial, hope you now have a complete and in-depth practical knowledge of how to create this amazing neumorphic Flutter registration screen UI design. I’d be looking forward to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
You might also like:
How To Set Flutter Textfield Expand Height [Flutter Easy Guide]
Beautiful Neumorphic Flutter Registration Page Design [Free Source Code]
[Solved] Flutter Elevated Button Remove Padding Implementation
Neumorphic Flutter Login And Registration Screen Design [Free Source Code]
Beautiful Flutter Login And Registration Design UI [Free Source Code]
Neumorphic Flutter Login And Registration Page Design [Free Source Code]
Beautiful Flutter Login And Registration UI Design [Free Source Code]
How To Change Flutter OutlinedButton Border Radius [Flutter Easy Guide]
How To Easily Use Flutter Appbar Tabs [Easy Flutter Guide]
Design Beautiful Flutter Signup Page UI Design [Free Source Code]
Design Beautiful Flutter Login And Registration Source Code
How To Set Flutter OutlinedButton Rounded Corners [Easy Flutter Guide]
