Skip to content

Instantly share code, notes, and snippets.

@mkobuolys
Last active February 14, 2023 03:52
Show Gist options
  • Save mkobuolys/b0fc02fd44ce51a826bf19cac1a9c119 to your computer and use it in GitHub Desktop.
Save mkobuolys/b0fc02fd44ce51a826bf19cac1a9c119 to your computer and use it in GitHub Desktop.
NOPE Flutter Form Validation Demo
/// https://dartpad.dev/b0fc02fd44ce51a826bf19cac1a9c119
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'NOPE Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const Padding(
padding: EdgeInsets.all(32),
child: MyCustomForm(),
),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<AlignmentGeometry> _animation;
final _formKey = GlobalKey<FormState>();
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
_animation = AlignmentTween(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.easeInOutCubic,
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
bool get _isValid => _formKey.currentState!.validate();
void _onHover(bool value) {
if (_controller.isAnimating) return;
if (!_isValid) {
_controller.isCompleted ? _controller.reverse() : _controller.forward();
}
}
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 50,
child: TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
),
AlignTransition(
alignment: _animation,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onHover: _onHover,
onPressed: () {
if (_isValid) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Thank you!')),
);
}
},
child: const Text('Submit'),
),
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment