Flutter Viral Animated Validation Form
Viral Form
Recently a video go viral on Social Media. An web developer build a Submit Form with Funny Interaction. When someone try to submit an invalid form then the submit button will run far from mouse cursor. In this article we will learn How to make Funny Validation Form on Flutter.Take A Look Here
Form Page:
Add Dependency
First of all create a new flutter project and In the pubspec.yaml of your flutter project, add the following dependency:
velocity_x: ^3.6.0google_fonts: ^3.0.1
What is ValocityX?
If you don't know about velocityX then lets know something new. VelocityX in Flutter is a free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development easier. It is inspired from Tailwindcss and SwiftUI.
Create Form Page
Create a new file called form.dart and Paste the code we provided below. It is very basic, if you follow my previous tutorial then you may know.
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final TextEditingController passwordController = TextEditingController();
final TextEditingController confirmPasswordController =
TextEditingController();
String password = "";
String confirmPassword = "";
bool isConfirm = false;
bool onHover = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: VxAppBar(
title: "Orkitt Viral Form".text.make(),
centerTitle: true,
),
body: Container(
width: MediaQuery.of(context).size.width * 0.9,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
offset: const Offset(1, 2),
spreadRadius: 10,
blurRadius: 10,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(
width: 10,
height: 40,
child: VxDivider(
type: VxDividerType.vertical,
width: 2,
color: Colors.purple,
),
),
"Confirm Password".text.xl.make(),
const SizedBox(
width: 10,
height: 40,
child: VxDivider(
type: VxDividerType.vertical,
width: 2,
color: Colors.purple,
),
),
],
),
40.heightBox,
VxTextField(
labelText: "Enter Password",
controller: passwordController,
isPassword: true,
fillColor: Colors.transparent,
borderColor: Colors.purple,
onChanged: (value) {
setState(() {
password = value;
});
},
),
40.heightBox,
VxTextField(
labelText: "Reenter Password",
controller: confirmPasswordController,
isPassword: true,
fillColor: Colors.transparent,
borderColor:
password != confirmPassword ? Colors.red : Colors.purple,
onChanged: (value) {
setState(() {
confirmPassword = value;
});
},
),
40.heightBox,
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Checkbox(
value: isConfirm,
onChanged: (value) {
setState(() {
isConfirm = value as bool;
});
},
),
"Confirm".text.make(),
],
),
20.heightBox,
password == confirmPassword && onHover == true
? AnimatedContainer(
duration: const Duration(seconds: 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 120,
height: 40,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(),
child: "confirm".toUpperCase().text.make(),
),
),
],
),
)
: AnimatedContainer(
duration: const Duration(seconds: 2),
child: Row(
mainAxisAlignment: onHover
? MainAxisAlignment.start
: MainAxisAlignment.end,
children: [
MouseRegion(
onHover: (event) {
setState(() {
onHover = onHover.toggle();
});
},
child: SizedBox(
width: 120,
height: 40,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(),
child: "confirm".toUpperCase().text.make(),
),
),
),
],
),
),
],
).pSymmetric(h: 30),
).centered(),
);
}
}Import to Home
Here is the Full source code of main.dart file. Copy and replace them.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'form.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Viral Validation Form',
theme: ThemeData(
primarySwatch: Colors.purple,
fontFamily: GoogleFonts.poppins().fontFamily),
home: const HomeScreen(),
);
}
}Run and Preview
If you run this app, You will see the Funny form Working as we expected.
Conclusion
In this sort tutorial we learn about VelocityX minimal UI framework and Created a funny validation Form using Velocity X. Hope you Enjoyed. Thank You.