vwdewaal
vwdewaal

Reputation: 1005

Flutter - dynamic TextEditingControllers, binding to another input field

The code below works, copy and paste it in to run. I need some guidance though on what I need to do next. My main query here is:

I'm generating the number of TextFields with the list of questions I define. when I hit the + button, that then prints my answers to the console. What I want to be able to do is link my loggedinuser (not defined in this code, but lets just say "me" on line 23) with the unique question identifier, and the answer to the unique question identifier. I don't need to check if the answer is correct at this moment. What do I need to do create that structure?

{user, uniqueQuestionIdentifier, answer}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "MyHomePage",
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String user = 'me';
  List<TextEditingController> _controller = new List();
  Map<String, String> _qidAndAns;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(
              children: [
                _myListView(context),
                RaisedButton(
                  child: Icon(Icons.add),
                  onPressed: () {
                    _controller.forEach((str) {
                      print(str.text);
                    }
                    );
                    },
                )
              ],
            ),
        ),
    );
  }

  Widget _myListView(BuildContext context) {
    _controller = [];
    final _questionBank = [
      QuestionAnswer(que: 'What is my name', ans: 'Quid pro quo Clarice', qid: '2342423424',),
      QuestionAnswer(que: 'What is my height', ans: 'loop', qid: '2342asdf424'),
      QuestionAnswer(que: 'What is my flight', ans: 'quip', qid: '23424fsadsdf24'),
      QuestionAnswer(que: 'What is my right', ans: 'jan', qid: '23424dsfas3224'),
      QuestionAnswer(que: 'What is my taste', ans: 'flan', qid: '23424dsfas3224'),
    ];


    return ListView.builder(
        shrinkWrap: true,
        itemCount: _questionBank.length,
        itemBuilder: (context, index) {
          _controller.add(new TextEditingController());
          return Card(
            child: ListTile(
              leading: Text(_questionBank[index].questionText),
              //trailing: Text(_questionBank[index].uniqueQuestionIdentifier),
              trailing: SizedBox(
                width: 200.0,
                child: TextField(
                  controller: _controller[index],
                ),
              ),
            ),
          );
        });
  }
}

class QuestionAnswer {
  String questionText;
  String questionAnswer;
  String uniqueQuestionIdentifier;

  QuestionAnswer({String que, String ans, String qid}) {
    questionText = que;
    questionAnswer = ans;
    uniqueQuestionIdentifier = qid;
  }
}

class AnswerBuilder extends QuestionAnswer {
  String user;
  Map<String , String> qidAndAnswer;

  AnswerBuilder({String u, Map<String, String> idAndA}){
    user = u;
    qidAndAnswer = idAndA;
  }
}

Upvotes: 1

Views: 1085

Answers (1)

xbadal
xbadal

Reputation: 1375

basically i have changed list to Map and adding qid as key. when you are printing you will get key and value. from the key which is qid you can get the question details and from value you will have as answers.

  Map<String, dynamic> _controller = new Map();

then

in the on Press replace with this code

  RaisedButton(
          child: Icon(Icons.add),
          onPressed: () {
            _controller.forEach((key, value) {
              print(
                  '<-------------Key: ${value.text} -------------- Value: ${value.text}------------>');
            });
          },
        )

and

 Widget _myListView(BuildContext context) {
_controller = {};
final _questionBank = [
  QuestionAnswer(
    que: 'What is my name',
    ans: 'Quid pro quo Clarice',
    qid: '2342423424',
  ),
  QuestionAnswer(que: 'What is my height', ans: 'loop', qid: '2342asdf424'),
  QuestionAnswer(
      que: 'What is my flight', ans: 'quip', qid: '23424fsadsdf24'),
  QuestionAnswer(
      que: 'What is my right', ans: 'jan', qid: '23424dsfas3224'),
  QuestionAnswer(
      que: 'What is my taste', ans: 'flan', qid: '23424dsfas3223'),
];

return ListView.builder(
    shrinkWrap: true,
    itemCount: _questionBank.length,
    itemBuilder: (context, index) {
      _controller.putIfAbsent(_questionBank[index].uniqueQuestionIdentifier,
              () => new TextEditingController());
      return Card(
        child: ListTile(
          leading: Text(_questionBank[index].questionText),
          //trailing: Text(_questionBank[index].uniqueQuestionIdentifier),
          trailing: SizedBox(
            width: 200.0,
            child: TextField(
              controller: _controller[_questionBank[index].uniqueQuestionIdentifier],
            ),
          ),
        ),
      );
    });

} }

Upvotes: 1

Related Questions