Capture Validation Error Handling and Display it in a Snackbar

Hi There Fellow Flutter Devs,
Query: Capture Login Validation Error Handling and Display it in a Toast or a Snackbar.

Example

class PasswordValidator {
  static String validate(String value) {
    if (value.isEmpty) {
      return 'Field Cannot Be Empty';
    }
    if (value.length < 7) {
      return 'Password Cant not be less than 7 Characters';
    }
    if (value.length > 25) {
      return 'Password Cant not be More than 25 Characters';
    }
    return null;
  }
}

Expected Result: I’d like to know how can I capture the returned Strings and display it in a separate Snackbar or a Toast.
I dont want to display the error under the textformfield.

I would greatly appreciate it if anyone can point me in the right direction.
Thanks,
S

Hello and welcome!

Here’s a proof of concept code; I am unable to make the error message disappear from below the TextFormField though. There should be a way to suppress it, but could not find the way yet. Note that MyForm is in a separate widget class, to let Scaffold.of(context) receive the right Scaffold context required to display the Snackbar.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Snackbar validation feeddback",
      home: MyCustomForm(),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sample Code'),
        ),
        body: MyForm(formKey: _formKey));
  }
}

class MyForm extends StatelessWidget {
  const MyForm({
    Key key,
    @required GlobalKey<FormState> formKey,
  })  : _formKey = formKey,
        super(key: key);

  final GlobalKey<FormState> _formKey;

  @override
  Widget build(BuildContext context) {
    return Form(
        key: _formKey,
        child: Column(children: <Widget>[
          TextFormField(
            autovalidate: false,
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          RaisedButton(
            onPressed: () {
              if (!_formKey.currentState.validate()) {
                Scaffold.of(context).showSnackBar(
                    SnackBar(content: Text('TextFormField is empty!')));
              }
            },
            child: Text('Submit'),
          )
        ]));
  }
}

I guess you can directly return snackbar from the validation or call snackbar function with error message as parameter before returning error String.

Hello @spammer_not, and welcome!
I tried that as first thing, calling snack bar from the validator function and returning null but couldn’t get over a nasty error about rendering hierarchy or something alike. Had to look for another solution and I came up with that. If you manage to make it work like your suggestion I’ll be glad to see it, would seem simpler indeed.