Flutter: How to make my fields required and save my dropdown and text data after the submit button is pressed?

Question

Here is my code. I'm unable to save the responses and even the dropdown and the text fields are not showing the required text and the * sign with them. I can't get how can I save the responses submitted by the user and where to do it and what should I write on the on Pressed function in the submit button to save the responses of all the fields above it.

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

void main() {
runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
TextEditingController problemBox = TextEditingController();

List _listItem = ["Category 1", "Category 2", "Category 3", "Category 4"];
List _listItem1 = [
"Sub Category 1",
"Sub Category 2",
"Sub Category 3",
"Sub Category 4"
];
List _listItem2 = ["CRIS", "ADMINISTRATION", "ZONE", "DEPARTMENT"];

String dropdownValue;
String holder = '';

void getDropDownItem() {
setState(() {
  holder = dropdownValue;
});
}

String dropdownValue1;
String holder1 = '';

void getDropDownItem1() {
setState(() {
  holder1 = dropdownValue1;
});
}

String dropdownValue2;
String holder2 = '';

void getDropDownItem2() {
setState(() {
  holder2 = dropdownValue2;
});
}

bool autoValidate = true;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(
      title: Text("Feedback"),
      centerTitle: true,
      leading: IconButton(
        onPressed: () {},
        icon: Icon(Icons.home),
      ),
    ),
    body: Container(
        child: Center(
      child: SingleChildScrollView(
        child: Form(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          key: _formKey,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text("CATEGORY"),
                    DropdownButton<String>(
                      hint: Text("Select"),
                      value: dropdownValue,
                      items: _listItem
                          .map<DropdownMenuItem<String>>((valueItem) {
                        return DropdownMenuItem<String>(
                          value: valueItem,
                          child: Text(valueItem),
                        );
                      }).toList(),
                      onChanged: (value) {
                        setState(() {
                          dropdownValue = value;
                        });
                      },
                    )
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text("SUBCATEGORY"),
                    DropdownButton<String>(
                      hint: Text("Select"),
                      value: dropdownValue1,
                      items: _listItem1
                          .map<DropdownMenuItem<String>>((valueItem1) {
                        return DropdownMenuItem<String>(
                          value: valueItem1,
                          child: Text(valueItem1),
                        );
                      }).toList(),
                      onChanged: (value) {
                        setState(() {
                          dropdownValue1 = value;
                        });
                      },
                    )
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text("MARKED TO"),
                    DropdownButton<String>(
                      hint: Text("Select"),
                      value: dropdownValue2,
                      items: _listItem2
                          .map<DropdownMenuItem<String>>((valueItem2) {
                        return DropdownMenuItem<String>(
                          value: valueItem2,
                          child: Text(valueItem2),
                        );
                      }).toList(),
                      onChanged: (value) {
                        setState(() {
                          dropdownValue2 = value;
                        });
                      },
                    )
                  ],
                ),
                SizedBox(height: 10),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.fromLTRB(70, 00, 70, 00),
                      child: TextFormField(
                        validator: (String value) {
                          if (value.isEmpty) {
                            return "Name is required";
                          }
                          return null;
                        },
                        controller: problemBox,
                        decoration: InputDecoration(
                          hintText: "Describe your problem here.",
                        ),
                        maxLength: 1000,
                        maxLines: 5,
                      ),
                    )
                  ],
                ),
                SizedBox(height: 10),
                ButtonTheme(
                  child: ElevatedButton(
                    child: Text("Submit"),
                    onPressed: () {
                      _formKey.currentState.save();

                    },
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.symmetric(
                          horizontal: 25, vertical: 15),
                    ),
                  ),
                ),
              ]),
        ),
      ),
    )));
 }

Solution

To show the error of the textField check if the Form is validate :

 ButtonTheme(
                          child: ElevatedButton(
                            child: Text("Submit"),
                            onPressed: () {
                             if(
                             _formKey.currentState.validate() // add this
                             ) {
                               print(" form is valideate"); // here do what you want when the form is validate :) 
                             }

                            },
                            style: ElevatedButton.styleFrom(
                              padding: EdgeInsets.symmetric(
                                  horizontal: 25, vertical: 15),
                            ),
                          ),
                        )

To validate dropDown , change DropdownButton to DropdownButtonFormField has a property validator –

  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Flexible(child: Text("MARKED TO")),
                        Flexible(
                          child: DropdownButtonFormField<String>( // change to DropdownButtonFormField
                            hint: Text("Select"),
                            value: dropdownValue2,
     validator: (value) => value == null ? 'your message' : null,// add validator property
                            items: _listItem2
                                .map<DropdownMenuItem<String>>((valueItem2) {
                              return DropdownMenuItem<String>(
                                value: valueItem2,
                                child: Text(valueItem2),
                              );
                            }).toList(),
                            onChanged: (value) {
                              setState(() {
                                dropdownValue2 = value;
                              });
                            },
                   
                          ),
                        )
                      ],
                    ),

and for * you can juste add it to required fields

Ex :

RichText(
                          textAlign: TextAlign.center,
                          text: TextSpan(
                            text: 'MARKED TO',
        
                            children: <TextSpan>[
                              TextSpan(
                                text: '*',
                                style: TextStyle(color: Colors.red),
                              ),
                            ],
                          ),
                    )

Comments

[Bhaskar2510]

It worked thank you can you tell me how can I validate my dropdown values and make them mandatory and how can I print the * sign in the so that it look mandatory

[Fatima ayaa]

For validate dropDown , change DropdownButton to DropdownButtonFormField has a property validator

[Bhaskar2510]

Thanks, it worked great for me. Could you please help me with this question too? Link: stackoverflow.com/questions/67468776/…