Flutter Dismissed Dismissible widget still part of tree issue, can't resolve

Question

I am currently trying to implement a list of dimissable widget items in combination with provider state management, but after hours of searching online i can't find a solution, so decide to post it here. Here is my code

import 'package:crypto_trader_app/models/strategy.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

import '../providers/strategies.dart';

import '../widgets/strategy_item.dart';
import '../widgets/app_drawer.dart';

import './edit_strategy_screen.dart';

class StrategiesScreen extends StatelessWidget {
  static const routeName = '/strategies';

  Future<void> _refreshStrategies(BuildContext context) async {
    await Provider.of<Strategies>(context, listen: false)
        .fetchAndSetStrategies();
  }

  @override
  Widget build(BuildContext context) {
    print('rebuilding...');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Your Strategies'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).pushNamed(EditStrategyScreen.routeName);
            },
          ),
        ],
      ),
      drawer: AppDrawer(),
      body: FutureBuilder(
        future: _refreshStrategies(context),
        builder: (ctx, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text("ERROR: ${snapshot.error}"),
            );
          } else {
            return buildStrategyItems(context);
          }
        },
      ),
    );
  }

  Widget buildStrategyItems(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () => _refreshStrategies(context),
      child: Consumer<Strategies>(
        builder: (ctx, strategiesData, _) => Padding(
          padding: EdgeInsets.all(8),
          child: ListView.builder(
            itemCount: strategiesData.strategies.length,
            itemBuilder: (ctx, i) {
              final strategy = strategiesData.strategies[i];
              return Column(
                children: [
                  Dismissible(
                    key: UniqueKey(),
                    background: Container(
                      color: Colors.red,
                      child: Icon(
                        Icons.delete,
                        color: Colors.white,
                        size: 40,
                      ),
                      alignment: Alignment.centerRight,
                      padding: EdgeInsets.only(right: 30),
                    ),
                    direction: DismissDirection.endToStart,
                    onDismissed: (direction) {
                      // remove the strategy item from the list
                      strategiesData.strategies.removeAt(i);
                      Provider.of<Strategies>(ctx, listen: false)
                          .deleteStrategy(strategy.name);
                      // Then show a snackbar.
                      Scaffold.of(ctx).showSnackBar(SnackBar(
                          content: Text("Strategy successfully deleted")));
                    },
                    child: Card(
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(2.0)),
                      child: InkWell(
                        onTap: () {
                          Navigator.of(ctx).pushNamed(
                              EditStrategyScreen.routeName,
                              arguments: strategy.name);
                        },
                        child: Padding(
                          padding: EdgeInsets.all(1),
                          child: ListTile(
                            leading: CircleAvatar(
                              child: Padding(
                                padding: EdgeInsets.all(5),
                                child: FittedBox(
                                  child:
                                      Text(strategy.asset.name.toUpperCase()),
                                ),
                              ),
                            ),
                            title: Text(strategy.name),
                            subtitle: Text(
                              DateFormat('dd MMM yyyy')
                                  .format(strategy.dateStarted),
                              style: TextStyle(fontSize: 10),
                            ),
                            trailing: Text('1 mins'),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

Essentially every time i swipe to delete a list, then click on a different item and go back to the list i get the following

I would really appreciate if you could help me figure this one out

Answer 1

lets try to use this

key: UniqueKey(),