nested listview.builder with List<TextEditingController> - flutter

Question

i have a nested listview.builder in my code.
Something like this:
listview.separated(
itemBuilder: (context, parentindex) {
return Padding(
...code
Listview.builder(
itemBuilder: (context, childindex){
return Padding(
...code)})}
)
how do I use a textEditingController wherein each textfield will be unique.
I tried using controller: _textcontroller[parentindex] but each parentindex will be changed upon input of textfield.
I was thinking like controller: _textcontroller[parentindex][childindex] so that each textfield edit will be unique but i know above code doesn't work or do i need to change something to make it work?
Thank you for your time.

Answer 1

Basicaly, create a stateful widget with each child to store your TextEditingController and make your code more clearly.
Flutter is widgets/components so don't put all things in to 1 widget.
Example: Copy this code below and paste to dartpad to see example app.
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var todos = <Todo>[
Todo('Go shoping, buy a snack'),
Todo('Kick the ball'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Todos')),
body: ListView.builder(
itemCount: todos.length + 1,
itemBuilder: (context, index) {
if (index == todos.length) {
newTodo() => setState(() => todos = [...todos, Todo('')]);
return ElevatedButton(onPressed: newTodo, child: const Text('new'));
}
updateTodo(Todo? newTodo) {
if (newTodo != null) setState(() => todos[index] = newTodo);
}
return RenderTodo(todo: todos[index], onChange: updateTodo);
},
),
);
}
}
class RenderTodo extends StatefulWidget {
const RenderTodo({
required this.todo,
required this.onChange,
this.onDelete,
Key? key,
}) : super(key: key);
final Todo todo;
final VoidCallback? onDelete;
final void Function(Todo newTodo) onChange;
#override
State<RenderTodo> createState() => _RenderTodoState();
}
class _RenderTodoState extends State<RenderTodo> {
late final TextEditingController controller;
#override
void initState() {
controller = TextEditingController(text: widget.todo.message);
super.initState();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
onChange(text) => widget.onChange(widget.todo.copyWith(message: text));
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: true,
onChanged: onChange,
controller: controller,
decoration: const InputDecoration(labelText: 'Input the message'),
),
),
);
}
}
class Todo {
String message;
Todo(this.message);
Todo copyWith({String? message}) => Todo(message ?? this.message);
}