android – How can i add a delete button in this app?


I have a flutter project that should have the user enter a string input thin put it into a card but for better ux i want to add a delete feature so i put an icon button but i cant think of a way to find the index of the card the user pressed on to delete it .

i have 2 files of code :

main.dart :

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: MainSt(),
    );
  }
}

class MainSt extends StatefulWidget {
  const MainSt({Key? key}) : super(key: key);

  @override
  State<MainSt> createState() => _MainStState();
}

final addController = TextEditingController();
List cardsList = [];

class _MainStState extends State<MainSt> {
  Future<void> _dialogBuilder(BuildContext context) {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Add a word or phrase'),
          content: TextField(
            controller: addController,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Enter word or phrase',
            ),
          ),
          actions: <Widget>[
            TextButton(
              style: TextButton.styleFrom(
                textStyle: Theme.of(context).textTheme.labelLarge,
              ),
              child: const Text('Cancel'),
              onPressed: () {
                Navigator.of(context).pop();
                addController.clear();
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                textStyle: Theme.of(context).textTheme.labelLarge,
              ),
              child: const Text('Done'),
              onPressed: () {
                print(addController.text);
                setState(
                  () {
                    if (!(addController.text.trim().isEmpty)) {
                      cardsList.add(
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Card(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                ListTile(
                                  trailing: IconButton(
                                    icon: Icon(Icons.delete),
                                    onPressed: () {
                                      setState(() {
                                        //add card delete logic
                                      });
                                    },
                                  ),
                                  title: Row(
                                    children: [
                                      SizedBox(
                                        width: 8,
                                      ),
                                      Text(addController.text),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      );
                      addController.clear();
                      Navigator.of(context).pop();
                    } else {
                      addController.clear();
                    }
                  },
                );
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text('Wordly'),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                // Add your action here
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              _dialogBuilder(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          FloatingActionButton(
            child: Icon(Icons.speaker),
            onPressed: () {},
          ),
        ],
      ),
      body: HomePage(),
    );
  }
}

and home_page.dart :

import 'package:flutter/material.dart';
import 'package:wordly/main.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: cardsList.length,
      itemBuilder: (context, index) {
        return cardsList[index];
      },
    );
  }
}

i tried saving the index before adding the card but The problem is that I am using the variable cardCurruntIndex to store the index of the card when it is added, but when you remove the card, the index might have changed due to the removal of other cards.i asked also chatGPT and bard but they didnot do anything rather than more errors .

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img