In flutter, how would I save the TextBox input from generated textboxes? - json

Question

Below is my full code, the only thing you need to do to run it is adding "http: any" to dependencies in pubspec.yaml.
What the code does is grab JSON input from source, and for each entry in the json feed create a card. Now for each question, I want the user to provide an answer, so when I add the button to the bottom, it brings up a popup box showing the answers (which I'll later post back to my server).
It would look something like:
Q1: "three"
Q2: "thirty"
Q3: "Some movie character"
Q4: "Walter White"
(I'll do the validation to my answers later)
My json is posted below the code.
import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<List<Question>> fetchQuestions(http.Client client) async {
final response =
await client.get('https://jsonblob.com/api/jsonBlob/a5885973-7f02-11ea-b97d-097037d3b153');
// Use the compute function to run parsePhotos in a separate isolate
return compute(parseQuestion, response.body);
}
// A function that will convert a response body into a List<Photo>
List<Question> parseQuestion(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Question>((json) => Question.fromJson(json)).toList();
}
class Question {
final int id;
final String question;
final String answer;
Question({this.id, this.question, this.answer});
factory Question.fromJson(Map<String, dynamic> json) {
return Question(
id: json['id'] as int,
question: json['question'] as String,
answer: json['answer'] as String
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final appTitle = 'Isolate Demo';
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(
child: FutureBuilder<List<Question>>(
future: fetchQuestions(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? QuestionList(questions: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
padding: EdgeInsets.fromLTRB(1.0, 10.0, 1.0, 10.0),
),
);
}
}
class QuestionList extends StatelessWidget {
final List<Question> questions;
QuestionList({Key key, this.questions}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: questions.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 +
200.0,
),
color: Colors.blueGrey,
alignment: Alignment.center,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
title: Text(questions[index].id.toString()),
subtitle: Text(questions[index].question),
),
new TextFormField(
decoration: new InputDecoration(
labelText: "Answer Question",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(
),
),
),
validator: (val) {
if(val.length==0) {
return "Type your answer here";
}else{
return null;
}
},
keyboardType: TextInputType.text,
style: new TextStyle(
fontFamily: "Poppins",
),
),
/*
// make buttons use the appropriate styles for cards
ButtonBar(
children: <Widget>[
RaisedButton(
color: Colors.lightBlue,
hoverColor: Colors.blue,
child: const Text('Open'),
onPressed: () {/* ... */},
),
],
),
*/
],
),
)),
],
);
},
);
}
}
[
{
"id" : 1,
"question" : "what is one plus two",
"answer": "three"
},
{
"id" : 2,
"question" : "what is five times 6",
"answer": "thirty"
},
{
"id" : 3,
"question" : "Who said show me the money",
"answer": "Cuba Gooding Jnr"
},
{
"id" : 4,
"question" : "who said I am the danger",
"answer": "Walter White"
}
]

Answer 1

Consider attaching a TextEditingController to the TextFormField through the controller property. You can access the text currently in the TextField using the controller's text field.