0

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

2 Answers 2

0

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]}"),
              ),
            );
          }),
    );
  }
}
0
0

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")));
              },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.