I tried to create a list of custom TextformField which can be deleted using a button with the Map function but the Textformfield is not deleting properly.

It is always the last Widget that is deleted.

Does anyone have a solution?

Est-ce qu'il est possible de créer un objet qui peut se suprrimer lui même ?

Thanks !

Here is my test code

you can try this code in Darpad

enter image description here

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<int> _listID = [0, 1, 2, 3];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
          children: _listID.map((id) {
        print(id);
        return TestWidget(
          id: id,
          onPressed: () {
            setState(() {
              _listID.remove(id);
              print(_listID);
            });
          },
        );
      }).toList()),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class TestWidget extends StatefulWidget {
  TestWidget({super.key, this.onPressed, required this.id});
  late VoidCallback? onPressed;
  late int id;
  @override
  State<TestWidget> createState() =>
      _TestWidgetState(onPressed: this.onPressed, id: id);
}

class _TestWidgetState extends State<TestWidget> {
  late VoidCallback? onPressed;
  late int id;
  _TestWidgetState({required this.id, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return TextFormField(
        decoration: InputDecoration(
      labelText: id.toString(),
      suffixIcon: IconButton(
          icon: const Icon(Icons.clear), onPressed: () => onPressed!()),
    ));
  }
}

CodePudding user response：

You dont need to pass data to state class, you can use widget.variableName

class TestWidget extends StatefulWidget {
  const TestWidget({super.key, this.onPressed, required this.id});
  final VoidCallback? onPressed;
  final int id;
  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
        decoration: InputDecoration(
      labelText: widget.id.toString(),
      suffixIcon: IconButton(
          icon: const Icon(Icons.clear), onPressed: () => widget.onPressed!()),
    ));
  }
}

CodePudding user response：

you have to pass a key to your TestWidget to preserve the state object of every widget here is how:

return TestWidget(
      key: ValueKey(id), // a value key with id as a value for every TestWidget
      id: id,
      onPressed: () {
        setState(() {
          _listID.remove(id);
          print(_listID);
        });
      },
    );

you can learn more about keys from the Flutter youtube channel