validation_form 0.0.2 copy "validation_form: ^0.0.2" to clipboard
validation_form: ^0.0.2 copied to clipboard

Reactive Forms heavily inspire this model-driven approach to handling form inputs and validations.

example/lib/main.dart

import 'package:example/cubits/login/login_cubit.dart';
import 'package:example/cubits/login/login_form.dart';
import 'package:flutter/material.dart' hide FormState;
import 'package:validation_form/validation_form.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MultiBlocProvider(
        providers: [
          BlocProvider(create: (context) => LoginForm()),
          BlocProvider(create: (context) => LoginCubit(form: context.read())),
        ],
        child: const LoginPage(),
      ),
    );
  }
}

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  LoginForm get _loginFormCubit => context.read<LoginForm>();

  final IsAdminNotifier isAdmin = IsAdminNotifier();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ValidationTextField(
                cubit: _loginFormCubit.name,
                field: (context, controller, state) {
                  return TextField(
                    controller: controller,
                    onTapOutside: (_) =>
                        FocusManager.instance.primaryFocus?.unfocus(),
                    decoration: InputDecoration(
                      labelText: 'Name',
                      errorText: state.error,
                    ),
                  );
                },
              ),
              ValidationTextField(
                cubit: _loginFormCubit.email,
                field: (context, controller, state) {
                  return TextField(
                    controller: controller,
                    onTapOutside: (_) =>
                        FocusManager.instance.primaryFocus?.unfocus(),
                    decoration: InputDecoration(
                      labelText: 'Email',
                      errorText: state.error,
                    ),
                  );
                },
              ),
              ValidationTextField(
                cubit: _loginFormCubit.password,
                field: (context, controller, state) {
                  return TextField(
                    controller: controller,
                    onTapOutside: (_) =>
                        FocusManager.instance.primaryFocus?.unfocus(),
                    decoration: InputDecoration(
                      labelText: 'Password',
                      errorText: state.error,
                    ),
                  );
                },
              ),
              ValidationTextField(
                cubit: _loginFormCubit.passwordConfirm,
                field: (context, controller, state) {
                  return TextField(
                    controller: controller,
                    onTapOutside: (_) =>
                        FocusManager.instance.primaryFocus?.unfocus(),
                    decoration: InputDecoration(
                      labelText: 'Password confirm',
                      errorText: state.error,
                    ),
                  );
                },
              ),
              Row(
                children: [
                  const Text('Is admin'),
                  const SizedBox(width: 10),
                  ValueListenableBuilder<bool>(
                    valueListenable: isAdmin,
                    builder: (BuildContext context, bool value, child) {
                      return Checkbox(
                        value: isAdmin.value,
                        onChanged: (_) =>
                            _loginFormCubit.onChangedIsAdmin(isAdmin),
                      );
                    },
                  ),
                ],
              ),
              Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    ValidationButtonForm<LoginForm, FormState>(
                      builder: (context, state) {
                        return ElevatedButton(
                          onPressed: state.status.isEnable
                              ? () => context.read<LoginCubit>().onSubmit()
                              : null,
                          child: Text(switch (state.status) {
                            FormStatus.loading => 'loading',
                            FormStatus.disable => 'Disable',
                            FormStatus.enable => 'Enable',
                          }),
                        );
                      },
                    ),
                    ElevatedButton(
                      child: const Text('Reset'),
                      onPressed: () => _loginFormCubit.reset(),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
2
likes
0
points
41
downloads

Publisher

unverified uploader

Weekly Downloads

Reactive Forms heavily inspire this model-driven approach to handling form inputs and validations.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

email_validator, equatable, flutter, flutter_bloc

More

Packages that depend on validation_form