RangeError: Invalid value: Not in inclusive range 0..2: 3 flutter - flutter

Question

I want to add text to the list when the onPressedButton is pressed. But I get the following error: RangeError: Invalid value: Not in inclusive range 0..2: 3 flutter
In some related answers, I confirmed that it was because 'itemCount: name.length' was not added, and I added it, but the result was the same. What is the problem?
The coding is as follows.
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 total = 3;
var name = ['김영숙', '홍길동', '피자집'];
var like = [0, 0, 0];
addName(a) {
setState(() {
name.add(a);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Text(total.toString()),
onPressed: () {
print(context.findAncestorWidgetOfExactType<MaterialApp>());
showDialog(
context: context,
builder: (context) {
return DialogUI(addName: addName);
});
},
),
appBar: AppBar(
title: Text(total.toString()),
),
body: ListView.builder(
itemCount: name.length,
itemBuilder: (context, i) {
return ListTile(
leading: Text(like[i].toString()),
title: Text(name[i]),
trailing: TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
backgroundColor: Colors.blue,
),
child: Text('좋아요'),
onPressed: () {
setState(() {
like[i]++;
});
},
),
);
},
),
bottomNavigationBar: BtmBar(),
);
}
}
class DialogUI extends StatelessWidget {
DialogUI({Key? key, this.addName}) : super(key: key);
final addName;
var inputData = TextEditingController();
var inputData2 = {};
#override
Widget build(BuildContext context) {
return Dialog(
child: Container(
padding: EdgeInsets.all(20),
width: 300,
height: 300,
child: Column(
children: [
TextField(
controller: inputData,
),
TextButton(
child: Text('OK'),
onPressed: () {
addName(inputData.text);
},
),
TextButton(
child: Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
);
}
}
class BtmBar extends StatelessWidget {
const BtmBar({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.phone),
Icon(Icons.message),
Icon(Icons.access_alarms),
],
),
);
}
}

Answer 1

RangeError comes up when we try to access the member of an array(here list) that doesn't exist.
Here, please check while accessing the members of name & like at a particular index do exist.

Answer 2

the problem is that you make name grow but not like
So you need to do
addName(a) {
setState(() {
name.add(a);
like.add(0);
});
}
so new names also have an entry for likes.
another tip is to just remove total and where you use total.toString() use name.length.toString() instead so that also shows the correct amount at all times