How to convert InputText to Text Widget in flutter - flutter

Question

I am trying to make a quiz system where i have to take the input from the user in the text field and show in the Text Widget. I am trying to take the input in the text field but after that how to to style it in the Text Widget to show like in image
return Column(
children: [
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3,
),
child: Container(
child: Center(
child: TextField(
decoration: InputDecoration(
// border: InputBorder.none,
hintText: "Type a Question...",
hintStyle: TextStyle(
fontSize: 25,
),
),
),
),
),
),
],
);
And how to create the options like when i click on add the option it will show a above option field which i can type the options and then is also converted to the text widget
GestureDetector(
onTap: () {
if (!hasSolved) {
setState(() {
hasSolved = true;
solvedOption = 2;
});
}
},
child: Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: hasSolved && solvedOption == 2
? Colors.white
: Colors.transparent,
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: hasSolved && solvedOption == 2
? Icon(
Icons.check,
size: 15,
color: Color(0xffFFC700),
)
: SizedBox(
width: 15,
height: 15,
),
)
],
),
Text(
"Maybe?",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(),
if (hasSolved)
Container(
constraints: BoxConstraints.expand(
height: 40,
width: 50,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
child: Center(
child: Text(
"44%",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
],
),
),
),

Answer 1

You will have to use Stack widget along with TextInputField & Text widget. At a time, only one of TextInputField or Text will be visible.
Whatever use enters in TextInputField, will be shown in the Text widget.
The variables to be used:
bool typing = false;
final controller = TextEditingController();
The Widget:
Stack(
children: <Widget>[
InkWell(
onTap: startTyping,
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(24),
color: Colors.red,
child: Visibility(
visible: !typing,
child: Container(
margin: const EdgeInsets.all(20),
child: Text(controller.text.isEmpty ? 'Type a question' : controller.text,
style: TextStyle(color: Colors.white),
),
),
),
),
],
),
The startTyping method:
void startTyping() {
setState(() {
typing = true;
});
showDialog(
context: context,
builder: (context) {
return WillPopScope(
onWillPop: () async {
setState(() {
typing = false;
});
return Future.value(true);
},
child: AlertDialog(
insetPadding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
content: GestureDetector(
onTap: () {
Navigator.of(context).pop();
setState(() {
typing = false;
});
},
child: Container(
alignment: Alignment.center,
color: Colors.transparent,
child: Wrap(
children: [
TextField(
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Type a question',
hintStyle: bold30Hint,
),
controller: controller,
autofocus: true,
maxLines: 10,
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
backgroundColor: Colors.transparent,
elevation: 0,
),
);
},
);
}

Answer 2

After reading your question, this is what my understanding.
You want to add the answer options dynamically just by adding the text in TextField widget and by tapping the + button, it has to add in the form of a list items as shown in the image right?
Whatever the text you entered and tapping on + button it should create a text tile as per your requirement?
If the above points are correct, then the solution is simple.
Solution:
Create an empty List List<String> inputs = new List<String>();
Then add the text from TextField OnChanged Parameter to the above list.
Finally create ListView.builder to display the list of options as you need.
Check the official link from Flutter team on displaying the list items. https://flutter.dev/docs/cookbook/lists/long-lists
In the above link, they created an example of generating numbers using List.generate. All you have to do is to replace that with your List of inputs data getting from TextField widget. Hope it helps, if not let me know.