skip to Main Content

This part of the project is for the feedback page.

I am building this part in our project I manage to connect it to Firestore but the validation is not working I read the flutter docs to no avail I did not manage to make it work. Do I really need a global key? Is my code to connect to Firestore wrong?

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class SimpleDialog extends StatelessWidget {
  // ignore: prefer_typing_uninitialized_variables
  final title;
  const SimpleDialog(this.title, {super.key});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Alert'),
      content: Text(title),
      actions: [
        TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('OK'))
      ],
    );
  }
}

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

  @override
  State<FeedbackPage> createState() => _FeedbackPageState();
}

class _FeedbackPageState extends State<FeedbackPage> {
  final nameOfuser = TextEditingController();
  final emailOfuser = TextEditingController();
  final messageOfuser = TextEditingController();
  

  List<bool> isTypeSelected = [false, false, false, true, true];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // AppBar para sa taas ng design
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            "PicLeaf",
            style: TextStyle(
                color: Color.fromRGBO(102, 204, 102, 1.0),
                fontWeight: FontWeight.bold),
          ),
          backgroundColor: Colors.white,
          shadowColor: const Color.fromARGB(255, 95, 94, 94),
        ),

        //body of the application
        backgroundColor: const Color(0xffeeeeee),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const SizedBox(
                height: 20,
              ),
              const Text(
                "Feedback",
                style: TextStyle(
                    fontSize: 30.0,
                    fontFamily: 'RobotoBold',
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(102, 204, 102, 1.0)),
              ),
              const Text(
                "Give us your feedback!",
                style: TextStyle(
                  fontSize: 18.0,
                  fontFamily: 'RobotoMedium',
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 32.0),
                child: Column(
                  children: <Widget>[
                    const SizedBox(height: 16.0),
                    TextFormField(
                      controller: nameOfuser,
                      decoration: const InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        hintText: "Name",
                        border: OutlineInputBorder(),
                      ),
                      validator: (nameOfuser) {
                        if (nameOfuser == null || nameOfuser.isEmpty) {
                          return 'Please enter your Name';
                        }
                        return null;
                      },
                    ),
                    const SizedBox(height: 8.0),
                    TextFormField(
                      controller: emailOfuser,
                      decoration: const InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        hintText: "Email",
                        border: OutlineInputBorder(),
                      ),
                      validator: (emailOfuser) {
                        if (emailOfuser == null || emailOfuser.isEmpty) {
                          return 'Please enter your Email';
                        }
                        return null;
                      },
                    ),
                    const SizedBox(height: 8.0),
                    TextFormField(
                      controller: messageOfuser,
                      maxLines: 6,
                      decoration: const InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        hintText: "Message",
                        border: OutlineInputBorder(),
                      ),
                      validator: (messageOfuser) {
                        if (messageOfuser == null || messageOfuser.isEmpty) {
                          return 'Please enter your Message';
                        }
                        return null;
                      },
                    ),
                    const SizedBox(height: 8.0),
                    MaterialButton(
                      height: 50.0,
                      minWidth: double.infinity,
                      color: const Color.fromRGBO(102, 204, 102, 1.0),
                      onPressed: () {
                        showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return const SimpleDialog('Feedback Submitted');
                            });
                        Map<String, dynamic> data = {
                          "Name": nameOfuser.text,
                          "Email": emailOfuser.text,
                          "Message": messageOfuser.text,
                          "Time": FieldValue.serverTimestamp(),
                        };
                        setState(() {
                          nameOfuser.clear();
                          emailOfuser.clear();
                          messageOfuser.clear();
                        });
                        FirebaseFirestore.instance
                            .collection("FeedbackMessages")
                            .add(data);
                      },
                      child: const Text(
                        "SUBMIT",
                        style: TextStyle(
                          fontFamily: 'RobotoBold',
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Container(
                      padding: const EdgeInsets.fromLTRB(20, 20, 20, 10),
                      child: const Text(
                        'Contact Us!',
                        style: TextStyle(
                            fontSize: 30,
                            fontFamily: 'RobotoBold',
                            color: Color.fromRGBO(102, 204, 102, 1.0)),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Column(
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                          margin: const EdgeInsets.symmetric(horizontal: 0),
                          child: TextButton.icon(
                            // <-- TextButton
                            onPressed: () {},
                            icon: const Icon(
                              Icons.facebook,
                              color: Colors.black,
                              size: 35.0,
                            ),
                            label: const Text(
                              'facebook.com/picleaf',
                              style: TextStyle(fontFamily: 'RobotoMedium'),
                            ),
                            style: TextButton.styleFrom(
                              foregroundColor: Colors.black,
                            ),
                          ),
                        ),
                        Container(
                            padding: const EdgeInsets.fromLTRB(20, 0, 20, 10),
                            margin: const EdgeInsets.symmetric(horizontal: 0),
                            child: TextButton.icon(
                              // <-- TextButton
                              onPressed: () {},
                              icon: const Icon(
                                Icons.email,
                                color: Colors.black,
                                size: 35.0,
                              ),

                              label: const Text(
                                '[email protected]',
                                style: TextStyle(fontFamily: 'RobotoMedium'),
                              ),

                              style: TextButton.styleFrom(
                                foregroundColor: Colors.black,
                              ),
                            )),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

3

Answers


  1. First you need Form widget, so wrap your padding with one second you need pass it GlobalKey<FormState>, so define one like this:

    final _formKey = GlobalKey<FormState>();
    

    then do this:

    Form(
      key: _formKey
      child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 32.0),
                    child: Column(
                      children: <Widget>[
                        const SizedBox(height: 16.0),
                     ....
    )
    

    lastly on your Submit button do this:

    MaterialButton(
          height: 50.0,
          minWidth: double.infinity,
          color: const Color.fromRGBO(102, 204, 102, 1.0),
          onPressed:  _formKey.currentState != null &&
                              _formKey.currentState.validate()
                          ?() {
                        showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return const SimpleDialog('Feedback Submitted');
                            });
                        Map<String, dynamic> data = {
                          "Name": nameOfuser.text,
                          "Email": emailOfuser.text,
                          "Message": messageOfuser.text,
                          "Time": FieldValue.serverTimestamp(),
                        };
                        setState(() {
                          nameOfuser.clear();
                          emailOfuser.clear();
                          messageOfuser.clear();
                        });
                        FirebaseFirestore.instance
                            .collection("FeedbackMessages")
                            .add(data);
                      }: null
    )
    
    Login or Signup to reply.
  2. You can wrap with Form widget to validate it and use a Global key to validate it.

    final _formKey = GlobalKey<FormState>();
    
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 32.0),
      child: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            const SizedBox(height: 16.0),
    

    You can also pass the key using FeedbackPage constructor.

    And check like

    final bool isValdded = _formKey.currentState?.validate() ?? false;
    if (isValdded) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text(' valid')),
      );
    }
    

    You can find more about /validation

    Login or Signup to reply.
  3.     import 'package:cloud_firestore/cloud_firestore.dart';
        import 'package:flutter/material.dart';
    
       class SimpleDialog extends StatelessWidget {
       // ignore: prefer_typing_uninitialized_variables
       final title;
    
       const SimpleDialog(this.title, {super.key});
    
       @override
       Widget build(BuildContext context) {
       return AlertDialog(
          title: const Text('Alert'),
          content: Text(title),
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('OK'))
          ],
        );
      }
    }
    
    class FeedbackPage extends StatefulWidget {
      const FeedbackPage({super.key});
    
      @override
      State<FeedbackPage> createState() => _FeedbackPageState();
    }
    
    class _FeedbackPageState extends State<FeedbackPage> {
      final nameOfuser = TextEditingController();
      final emailOfuser = TextEditingController();
      final messageOfuser = TextEditingController();
      final _formKey = GlobalKey<FormState>();
    
      List<bool> isTypeSelected = [false, false, false, true, true];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            // AppBar para sa taas ng design
            appBar: AppBar(
              centerTitle: true,
              title: const Text(
                "PicLeaf",
                style: TextStyle(color: Color.fromRGBO(102, 204, 102, 1.0), fontWeight: FontWeight.bold),
              ),
              backgroundColor: Colors.white,
              shadowColor: const Color.fromARGB(255, 95, 94, 94),
            ),
    
            //body of the application
            backgroundColor: const Color(0xffeeeeee),
            body: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  const SizedBox(
                    height: 20,
                  ),
                  const Text(
                    "Feedback",
                    style: TextStyle(fontSize: 30.0, fontFamily: 'RobotoBold', fontWeight: FontWeight.bold, color: Color.fromRGBO(102, 204, 102, 1.0)),
                  ),
                  const Text(
                    "Give us your feedback!",
                    style: TextStyle(
                      fontSize: 18.0,
                      fontFamily: 'RobotoMedium',
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 32.0),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        children: <Widget>[
                          const SizedBox(height: 16.0),
                          TextFormField(
                            controller: nameOfuser,
                            decoration: const InputDecoration(
                              filled: true,
                              fillColor: Colors.white,
                              hintText: "Name",
                              border: OutlineInputBorder(),
                            ),
                            validator: (nameOfuser) {
                              if (nameOfuser == null || nameOfuser.isEmpty) {
                                return 'Please enter your Name';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 8.0),
                          TextFormField(
                            controller: emailOfuser,
                            decoration: const InputDecoration(
                              filled: true,
                              fillColor: Colors.white,
                              hintText: "Email",
                              border: OutlineInputBorder(),
                            ),
                            validator: (emailOfuser) {
                              if (emailOfuser == null || emailOfuser.isEmpty) {
                                return 'Please enter your Email';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 8.0),
                          TextFormField(
                            controller: messageOfuser,
                            maxLines: 6,
                            decoration: const InputDecoration(
                              filled: true,
                              fillColor: Colors.white,
                              hintText: "Message",
                              border: OutlineInputBorder(),
                            ),
                            validator: (messageOfuser) {
                              if (messageOfuser == null || messageOfuser.isEmpty) {
                                return 'Please enter your Message';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 8.0),
                          MaterialButton(
                            height: 50.0,
                            minWidth: double.infinity,
                            color: const Color.fromRGBO(102, 204, 102, 1.0),
                            onPressed: () {
                              if (_formKey.currentState!.validate()) {
                                showDialog(
                                    context: context,
                                    builder: (BuildContext context) {
                                      return const SimpleDialog('Feedback Submitted');
                                    });
                                Map<String, dynamic> data = {
                                  "Name": nameOfuser.text,
                                  "Email": emailOfuser.text,
                                  "Message": messageOfuser.text,
                                  "Time": FieldValue.serverTimestamp(),
                                };
                                setState(() {
                                  nameOfuser.clear();
                                  emailOfuser.clear();
                                  messageOfuser.clear();
                                });
                                FirebaseFirestore.instance.collection("FeedbackMessages").add(data);
                              }
                            },
                            child: const Text(
                              "SUBMIT",
                              style: TextStyle(
                                fontFamily: 'RobotoBold',
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Container(
                            padding: const EdgeInsets.fromLTRB(20, 20, 20, 10),
                            child: const Text(
                              'Contact Us!',
                              style: TextStyle(fontSize: 30, fontFamily: 'RobotoBold', color: Color.fromRGBO(102, 204, 102, 1.0)),
                              textAlign: TextAlign.center,
                            ),
                          ),
                          Column(
                            children: <Widget>[
                              Container(
                                padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                                margin: const EdgeInsets.symmetric(horizontal: 0),
                                child: TextButton.icon(
                                  // <-- TextButton
                                  onPressed: () {},
                                  icon: const Icon(
                                    Icons.facebook,
                                    color: Colors.black,
                                    size: 35.0,
                                  ),
                                  label: const Text(
                                    'facebook.com/picleaf',
                                    style: TextStyle(fontFamily: 'RobotoMedium'),
                                  ),
                                  style: TextButton.styleFrom(
                                    foregroundColor: Colors.black,
                                  ),
                                ),
                              ),
                              Container(
                                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 10),
                                  margin: const EdgeInsets.symmetric(horizontal: 0),
                                  child: TextButton.icon(
                                    // <-- TextButton
                                    onPressed: () {},
                                    icon: const Icon(
                                      Icons.email,
                                      color: Colors.black,
                                      size: 35.0,
                                    ),
    
                                    label: const Text(
                                      '[email protected]',
                                      style: TextStyle(fontFamily: 'RobotoMedium'),
                                    ),
    
                                    style: TextButton.styleFrom(
                                      foregroundColor: Colors.black,
                                    ),
                                  )),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ));
      }
    }
    

    You can replace this code with your code.
    here i am using Form widget with _formKey

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search