Home > Back-end >  Store textfield value in Map value
Store textfield value in Map value

Time:02-18

so i have this map of questions and have a textfield widget and i'm using a for loop to go through the questions and display them. id love to store the textfield data in the right place in the map (something like: question 1 => answer 1 and so on)
here's the code:

import 'package:flutter/material.dart';

class CustomQuestionField extends StatefulWidget {
  @override
  State<CustomQuestionField> createState() => _CustomQuestionFieldState();
}

class _CustomQuestionFieldState extends State<CustomQuestionField> {
  final Map<String, String> qna = {
    "Everyone should read...": "",
    "Two truths and a lie...": "",
    "I can quote every line from...": "",
    "If I didn't have to work I would...": "",
    "People think I am...": "",
    "Never have I ever...": "",
    "Believe it or not, I...": "",
    "I am amazing at...": "",
    "My life as a movie...": "",
    "My ultimate dinner party guest list...": "",
    "The dorkiest thing about me is...": "",
    "On the weekend you'll find me...": "",
  };

  @override
  Widget build(
    BuildContext context,
  ) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        for (var q in qna.keys) question(q),
        RaisedButton(
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            color: Colors.purple,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(
                "Submit",
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
            onPressed: () {
              print(qna.values);
            }),
      ],
    );
  }

  Widget question(String question) {
    final myController = TextEditingController();
    return Padding(
      padding: const EdgeInsets.only(top: 15),
      child: Stack(
        children: [
          Card(
            elevation: 0,
            shape: RoundedRectangleBorder(
                side: BorderSide(width: 0.5, color: Colors.black),
                borderRadius: BorderRadius.circular(
                  32,
                )),
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 15, left: 10),
                    child: Text(
                      question,
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  TextField(
                    onChanged: ((value) {
                      print(value);
                    }),
                    onSubmitted: (String ansr) {
                      setState(() {
                        
                      });
                    },
                    controller: myController,
                    decoration: InputDecoration(
                      // filled: true,
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                        borderSide: BorderSide(
                          color: Color.fromARGB(255, 128, 124, 124),
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                        borderSide: BorderSide(
                          color: Color.fromARGB(255, 128, 124, 124),
                        ),
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20),
                        borderSide: BorderSide(
                          color: Color.fromARGB(255, 128, 124, 124),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            top: -10,
            right: -25,
            child: RawMaterialButton(
              onPressed: () {},
              elevation: 2.0,
              fillColor: Colors.white,
              child: Text(
                "X",
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
              shape: CircleBorder(),
            ),
          ),
        ],
      ),
    );
  }
}

here's a screenshot:

any ideas on how to do it?

CodePudding user response:

just create a map to contain the answers:

final Map<String, String> answers = {};

then in your onSubmitted, add this line:

answers[question] = ansr;

CodePudding user response:

You does not defined key in map, convert your map into this

final Map<String, String> qna = [
    {"question" : "Everyone should read...", "answer":""},
    {"question" :"Two truths and a lie...", "answer":""},
    {"question" :"I can quote every line from...", "answer":""},
    .
    .
    .
    {"question" :"On the weekend you'll find me...", "answer":""},
    ];

  **In Text Field setState**

 TextField(
                    onChanged: ((value) {
                      print(value);
                    }),
                    onSubmitted: (String ansr) {
                      setState(() {
                        q[answer]=ansr;
                      });
                    },
--------------------------------------
RaisedButton(
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            color: Colors.purple,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(
                "Submit",
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
            onPressed: () {
              print(qna["answer"]);
            }),
  • Related