Dynamically created widgets using json Data in listvew builder the TextFeild not working in flutter - flutter

Question

I have created a list of the widgets using JSON data, I have five types of widgets, and each widget is added to the list depending on the JSON data, but the issue is with the widget includes a text field, All widget displays ok but once I click on the text field the keyboard appears and disappears immediately and gives this error "Exception caught by widgets library" => "Incorrect use of ParentDataWidget."
I try removing everything and adding just this text field widget in the list, but it still not working right. Please guide me on where am doing wrong.
import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:my_car/AppUI/CustomWidgets/DateQuestionBox.dart';
import 'package:my_car/AppUI/CustomWidgets/MultiSelectQuestionBox.dart';
import 'package:my_car/AppUI/CustomWidgets/RadioQuestionBox.dart';
import 'package:my_car/AppUI/CustomWidgets/SelectQuestionBox.dart';
import 'package:my_car/AppUI/CustomWidgets/TextQuestionBox.dart';
import 'package:my_car/LocalData/AppColors.dart';
import 'package:flutter/services.dart';
import 'package:my_car/Models/MyClaimQuestionsResponse.dart';
import 'package:my_car/Models/VehiclesResponse.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../../Models/VehiclesResponse.dart';
class SubmitClaimQuestionsPage extends StatefulWidget {
String vehicle;
String coverage;
SubmitClaimQuestionsPage(this.vehicle, this.coverage, {Key? key})
: super(key: key);
#override
SubmitClaimQuestionsState createState() =>
SubmitClaimQuestionsState(this.coverage, this.vehicle);
}
class SubmitClaimQuestionsState extends State {
String vehicle;
String coverage;
SubmitClaimQuestionsState(this.coverage, this.vehicle);
Future getMyVehicles() async {
final prefs = await SharedPreferences.getInstance();
final String? action = prefs.getString('vehiclesList');
VehiclesResponse myVehiclesResponse =
VehiclesResponse.fromJson(jsonDecode(action!));
return myVehiclesResponse.vehicles;
}
static List<MyCarClaimType> myCarClaims = <MyCarClaimType>[];
// Fetch content from the json file
Future generateQuestionsFromJson() async {
final String response = await rootBundle
.loadString('lib/Assets/JsonDataFiles/MyCarDataClaimQuestions.json');
MyClaimQuestionsResponse myClaimQuestionsResponse =
MyClaimQuestionsResponse.fromJson(jsonDecode(response));
if (myClaimQuestionsResponse.myCarClaimTypes.isNotEmpty) {
myCarClaims.clear();
myCarClaims = myClaimQuestionsResponse.myCarClaimTypes
.where((element) =>
element.claimType.toLowerCase() == coverage.toLowerCase())
.toList();
}
if (myCarClaims.isNotEmpty) {
setState(() {
for (var i = 0; i < myCarClaims.length; i++) {
if (myCarClaims[i].questionType == "TEXT") {
allQuestions.add(TextQuestionBox(myCarClaims[i]));
} else if (myCarClaims[i].questionType == "SELECT") {
allQuestions.add(SelectQuestionBox(myCarClaims[i]));
} else if (myCarClaims[i].questionType == "RADIO") {
allQuestions.add(RadioQuestionBox(myCarClaims[i]));
} else if (myCarClaims[i].questionType == "MULTI_SELECT") {
allQuestions.add(MultiSelectQuestionBox(myCarClaims[i]));
} else if (myCarClaims[i].questionType == "DATE") {
allQuestions.add(DateQuestionBox(myCarClaims[i]));
}
}
});
}
return allQuestions;
}
#override
void initState() {
super.initState();
generateQuestionsFromJson();
}
bool isVehicleSelected = false;
// ignore: unused_field
List<Widget> allQuestions = <Widget>[];
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
fontFamily: 'Lato',
),
home: Scaffold(
backgroundColor: Color(AppColors.bgColor),
body: SafeArea(
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Container(
margin: const EdgeInsets.only(top: 30, bottom: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(
bottom: 15,
left: 20,
right: 20,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Align(
alignment: Alignment.centerLeft,
child: SvgPicture.asset(
'lib/Assets/Images/backarrow.svg',
height: 20,
)),
),
Expanded(
child: Column(
children: [
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(right: 20),
child: Text(
vehicle,
textAlign: TextAlign.start,
style: const TextStyle(
fontSize: 18,
letterSpacing: -0.5,
fontWeight: FontWeight.w700,
),
),
),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(right: 20),
child: Text(
coverage,
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: Color(AppColors.primaryBlueColor)),
),
),
),
],
)),
],
),
),
Flexible(
fit: FlexFit.loose,
child: ListView.builder(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
key: UniqueKey(),
itemCount: allQuestions.length,
itemBuilder: (BuildContext context, int index) {
return allQuestions[index];
},
),
),
const SizedBox(
width: 20,
),
],
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.only(
left: 20,
right: 20,
top: 15,
),
child: TextButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(
const EdgeInsets.symmetric(vertical: 16)),
backgroundColor: MaterialStateProperty.all(
Color(AppColors.primaryBlueColor)),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
)),
),
child: Text(
'Submit Claim',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 15,
color:
Color(AppColors.primaryWhiteButtomTextColor)),
),
onPressed: () {},
),
),
],
),
),
),
),
),
);
}
}
My TextFeild widget is this:
import 'package:flutter/material.dart';
import 'package:my_car/LocalData/AppColors.dart';
import 'package:my_car/Models/MyClaimQuestionsResponse.dart';
class TextQuestionBox extends StatefulWidget {
MyCarClaimType claimObj;
TextQuestionBox(this.claimObj, {Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return TextQuestionBoxState(claimObj);
}
}
class TextQuestionBoxState extends State<TextQuestionBox> {
MyCarClaimType claimObj;
TextQuestionBoxState(this.claimObj);
TextEditingController txtControler = TextEditingController();
Widget get questionTxtBox {
return Container(
//width: double.infinity,
//height: 200,
margin: const EdgeInsets.symmetric(horizontal: 10),
padding: const EdgeInsets.all(10),
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${claimObj.order + 1}. ",
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
Expanded(
child: Text.rich(
//softWrap: false,
//overflow: TextOverflow.fade,
TextSpan(
text: claimObj.question,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
),
children: <InlineSpan>[
TextSpan(
text: claimObj.isMandatory == "YES" ? "*" : "",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: Color(AppColors.primaryBlueColor)),
),
])),
),
],
),
const SizedBox(
height: 10,
),
Container(
height: 110,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextField(
controller: txtControler,
keyboardType: TextInputType.multiline,
//maxLines: null,
style: const TextStyle(
fontSize: 14, fontWeight: FontWeight.w500),
decoration: const InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.transparent,
hintText: 'Description',
),
),
),
Container(
margin: const EdgeInsets.only(bottom: 10, right: 15),
child: Text(
'Min. 40 Letters',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color: Color(AppColors.greyText)),
))
],
)),
],
),
);
}
#override
Widget build(BuildContext context) {
return questionTxtBox;
}
}

Answer 1

TextFields usually try to expand to the available width. This can be problematic in a Column where usually only height is fixed and the Textfield tries to expand into infinity. You should try wrapping the TextField in a Widget that gives it a fixed width like a SizedBox.