You can use ExpansionTile instead of ExpansionPanelRadio
[Here is the output][1]
[1]: https://i.stack.imgur.com/AiNaj.png
and here is the sample code :
class FaqsScreen extends StatelessWidget {
FaqsScreen({super.key});
final List<int> _faqData = List.generate(5, (index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: _faqData
.map(
(faq) => Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10),
BoxShadow(
color: Colors.black.withOpacity(0.3),
spreadRadius: -2,
blurRadius: 5,
),
],
),
child: ExpansionTile(
title: Text('1. Lorem Ipsum is simply dummy text?'),
children: [
Divider(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 8),
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
),
),
],
),
),
)
.toList(),
),
),
),
),
);
}
}
The problem is that you don't keep track on which `TextField` corresponds with which expense. To solve it you need to define controllers that you can give the `TextFields`. Like this for example:
```
class _TestPageState extends State<TestPage> {
List<ExpenseItemModel> expenses = [ExpenseItemModel()];
List<TextEditingController> controllers = [TextEditingController()];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(height: 150),
Expanded(
child: ListView.builder(
itemCount: expenses.length,
itemBuilder: (c, i) {
return Column(
children: [
Row(
children: [
IconButton(
onPressed: () {
if (i == expenses.length - 1 ||
(expenses.length == 1)) return;
expenses.removeAt(i);
controllers.removeAt(i);
setState(() {});
},
icon: Icon(CupertinoIcons.delete),
),
Expanded(
child: TextField(
controller: controllers[i],
onChanged: (val) {
if (expenses.length - 1 == i) {
expenses.add(ExpenseItemModel());
controllers.add(TextEditingController());
}
setState(() {});
},
decoration: InputDecoration(
border: border,
enabledBorder: border,
focusedBorder: border,
),
),
),
SizedBox(width: 50),
],
),
SizedBox(height: 10),
],
);
},
),
),
],
),
);
}
final border = OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
);
}
```
Note I also changed the way you initialize `expenses` it a more concise way.
Instead of having two lists like this you might even want to consider making the `TextEditingController` part of your `ExpenseItemModel` and then do something like `controller: expenses[i].controller,`
