Getting Error In Flutter : RangeError (index) : Invalid value: Not in inclusive range - flutter

Question

I am flutter beginner and while practicing the Swipe to dismiss option I have completed the below mentioned code and after deleting few list items I am receiving the below error, I tried to solve the problem but couldn't,
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
// This widget is the root of your application.
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHome(),
);
}
}
class MyHome extends StatelessWidget {
final List<String> items = new List<String>.generate(30, (i) => "Items ${i+1}");
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Swipe To Dismiss"),
centerTitle: true,
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context,int index){
return Dismissible(
key: Key(items[index]),
onDismissed: (direction){
items.removeAt(index);
Scaffold.of(context).showSnackBar(new SnackBar(
content: Text("ITEM IS SUCCESSFULLY REMOVED")));
},
background: Container(
color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
),
child: ListTile(
title: Text("${items[index]}"),
),
);
}),
);
}
}
error while deleting list items and then scrolling down

Answer 1

Convert stateless widget into statefull and use setState so that ListView gets rebuilded.
Below code is tested & working. You can test it here.
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
// This widget is the root of your application.
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
#override
createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
final List<String> items =
new List<String>.generate(30, (i) => "Items ${i + 1}");
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Swipe To Dismiss"),
centerTitle: true,
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, int index) {
return Dismissible(
key: Key(items[index]),
onDismissed: (direction) {
items.removeAt(index);
Scaffold.of(context).showSnackBar(new SnackBar(
content: Text("ITEM IS SUCCESSFULLY REMOVED")));
setState((){});
},
background: Container(
color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0),
),
child: ListTile(
title: Text("${items[index]}"),
),
);
}),
);
}
}

Answer 2

I have sucessfully fixed the issue . I converted MyHome from Stateless to StateFul Widget and added setState in onDismissed . Here is the changed code.
onDismissed: (direction){
setState(() {
items.removeAt(index);
});
Scaffold.of(context).showSnackBar(new SnackBar(
content: Text("ITEM IS SUCCESSFULLY REMOVED")));
},