How to validate Flutter Text Form Field before updating Firestore database

Question

I'm having trouble validating a text form field before data is uploaded to the Firestore database. There aren't any issues with Firestore, only with the way I have written my code.

The validation is to check that the text field is not null or empty, the same as the Flutter codelab. If the text field is empty an error message should appear and the user should remain on the same page until the text field has data. Once the text field is valid the data should be saved to Firestore, a snackbar confirmation should appear on the page and the user should be navigated to a different page.

With the code I have written the user navigates to the new page and the snackbar message appears even if all of the text form fields are empty (invalid). I tried to remove extra code to make it easier to view the code. In my form I have three text fields with identical validation rules. Any help would be greatly appreciated. Thanks.

My Text Form Field:

TextFormField(
labelText: 'Trivia Game Url',
onChanged: (val) {
triviaGameImageURL = val as String;
},
controller: _triviaGameImageURLController,
validator: _triviaGameImageURLValidator,
),

Validation method:

 String? _triviaGameImageURLValidator(value) {
      if (value == null || value.isEmpty) {
        return 'Image Url is required';
      }
      return null;
    }

Method to update Firestore when user taps button:

Future<void> createFirestoreTriviaGame() async {
  final form = _formKey.currentState;
  if (form!.validate()) {
    setState(() {
      _isLoading = true;
    });
    String triviaGameID = const Uuid().v4();
    Map<String, dynamic> triviaGameMap = {
      FirebaseString.triviaGameID: triviaGameID,
      FirebaseString.triviaGameImageURL: triviaGameImageURL,

    };
    await firestoreMethods
        .addTriviaGameData(
      triviaGameData: triviaGameMap,
      triviaGameID: triviaGameID,
    )
        .then((value) {
      setState(() {
        _isLoading = false;
      });
    });
  }
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text(SnackBarString.triviaGameCreated),
    ),
  );
  Timer(const Duration(seconds: 2), () {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(
        builder: (context) => const AddTriviaGamePage(),
      ),
    );
  });
}

Answer 1

You need to wrap the textfield in a form widget and assign a form key to the form widget

 final GlobalKey<FormState> formKey = GlobalKey<FormState>();
Form(
      key: formKey,
      child: Column(
        children: [
... your text fields

// validate 
    if (formKey.currentState!.validate()) {