I am adding the scrollviewbar. When I click on the show more, it will expand the card in gridview.builder. As soon as it expands, it shows bottom overflow but instead of that, i want the listview.builder to be scrolled. This masterListMobView is being imported to other parent. Their also, I have tried using singlechildscrollviewbar
Widget masterListMobView(List<dynamic> fieldList, BuildContext context){
var myFields = List.from(widget.screenDefinition['fieldDetails']['fields']);
myFields.removeAt(0);
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: widget.screenDefinition['data'].length,
itemBuilder: (context, index) {
keyValuePairOfData(widget.screenDefinition['data'],
widget.screenDefinition['fieldDetails']['fields']);
return Padding(
padding: const EdgeInsets.only(
top: 3, bottom: 3, left: 10, right: 10),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Card(
elevation: 0,
color: Colors.grey[200],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Chip(
elevation: 0,
padding: EdgeInsets.all(3),
backgroundColor:Color(0XFF5444AB),
shadowColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
),
label: SizedBox(
child: Align(
alignment: Alignment.center,
child: Text(
'Details: ',
style: TextStyle(
fontSize: 12,
color: Colors.white,
fontWeight: FontWeight.w400
),
),
),
),
),
Expanded(child:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (widget
.screenDefinition['fieldDetails']
['fields']
.length >
2) ...[
GestureDetector(
onTap: () {
setState(() {
showField[index] = !showField[index];
});
},
child: Text(
showField[index]
? 'Show Less'
: 'Show More',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
fontFamily: 'Poppins',
color: Color.fromRGBO(151, 152, 163, 1),
),
),
),
GestureDetector(
onTap: () {
setState(() {
showField[index] = !showField[index];
});
},
child: Icon(
showField[index]
? Icons.arrow_drop_up
: Icons.arrow_drop_down,
size: 28,
color: const Color.fromRGBO(
151, 152, 163, 1),
),
),
]
],
)
),
],
),
GridView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
mainAxisExtent: 60,
),
itemCount: showField[index]?myFields.length: 4 ,
itemBuilder: (context, index1) {
if (myFields[index1] != null &&
myFields[index1]['isMainField']
.toString() ==
'true' &&
myFields[index1]['isVisible'].toString() ==
'true'
&& myFields[index1]['display_name']['en'].toString() !=
'ID') {
return Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
myFields[index1]
['display_name']['en'],
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
fontFamily: 'Poppins',
color: Color.fromRGBO(
151, 152, 163, 1),
),
overflow: TextOverflow.ellipsis,
),
Wrap(
children: [
Text(
keyVal[index][myFields[index1]
['key']] !=
null
? keyVal[index][
myFields
[index1]['key']]!
: '',
style: const TextStyle(
fontSize: 14,
fontWeight:
FontWeight.w400,
fontFamily: 'Poppins',
color: Colors.black,
),
overflow:
TextOverflow.ellipsis,
),
],
),
],
),
),
),
if (index1 % 2 == 0 &&
index1 <
myFields.length -
1) // Add vertical line for even indices and not for the last column
Container(
width: 1.0,
height: 40.0,
color: Colors
.grey, // Customize the line color here
),
const SizedBox(width: 10.0,)
],
);
} else {
return const SizedBox.shrink();
}
},
),
],
),
),
),
)),
));
},
),
);
}
