skip to Main Content

is there a correct way to show borders for a listTile within an AlertDialog?
i tried to add a border by setting the shape parameter but the borders are showing in the background of the title of the alert dialog and in the background of the actions of alertdialog
Recived Output

enter image description here

Expected Output

enter image description here

  void deleteDialog(List<String> itemList) {
    Color currentTextColor = Theme.of(context).textTheme.bodyMedium!.color!;
    showDialog(
      context: context,
      builder: (BuildContext context) {
        List<String> selectedItems = [];
        double setWidth = 500;
        double setHeight = 500;
        return AlertDialog(
          title: const Text('Delete Key Value Pair'),
          content: StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return SizedBox(
                width: double.minPositive > setWidth
                    ? double.minPositive
                    : setWidth,
                height: setHeight,
                child: ListView.builder(
                  itemCount: itemList.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                        side: BorderSide(width: 1, color: currentTextColor),
                      ),
                      title: Text(itemList[index]),
                      trailing: IconButton(
                        onPressed: () {
                          setState(() {
                            selectedItems.add(itemList[index]);
                            itemList.removeAt(index);
                          });
                        },
                        icon: const Icon(Icons.delete),
                      ),
                    );
                  },
                ),
              );
            },
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                print(
                    'Remaining items: $itemList'); //need to write a save function here
                Navigator.of(context).pop();
              },
              child: const Text('Save'),
            ),
          ],
        );
      },
    );
  }

2

Answers


  1. Chosen as BEST ANSWER

    wrapping the list tile in a container and adding a border to the container worked.

    void deleteDialog(List<String> itemList) {
        Color currentTextColor = Theme.of(context).textTheme.bodyMedium!.color!;
        showDialog(
          context: context,
          builder: (BuildContext context) {
            List<String> selectedItems = [];
            double setWidth = 500;
            double setHeight = 300;
            return AlertDialog(
              title: const Text('Delete Key Value Pair'),
              content: StatefulBuilder(
                builder: (BuildContext context, StateSetter setState) {
                  return SizedBox(
                    width: double.minPositive > setWidth
                        ? double.minPositive
                        : setWidth,
                    height: setHeight,
                    child: ListView.builder(
                      itemCount: itemList.length,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: currentTextColor),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: ListTile(
                              // shape: RoundedRectangleBorder(
                              //   borderRadius: BorderRadius.circular(8),
                              //   side: BorderSide(width: 1, color: currentTextColor),
                              // ),
                              title: Text(itemList[index]),
                              trailing: IconButton(
                                onPressed: () {
                                  setState(() {
                                    selectedItems.add(itemList[index]);
                                    itemList.removeAt(index);
                                  });
                                },
                                icon: const Icon(Icons.delete),
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  );
                },
              ),
              actions: [
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: const Text('Cancel'),
                ),
                TextButton(
                  onPressed: () {
                    print(
                        'Remaining items: $itemList'); //need to write a save function here
                    Navigator.of(context).pop();
                  },
                  child: const Text('Save'),
                ),
              ],
            );
          },
        );
      }
    

  2. try wrapping ListTile with card widget it will resolved your issue.

    StatefulBuilder(
                      builder: (BuildContext context, StateSetter setState) {
                        return SizedBox(
                          width: double.minPositive > setWidth
                              ? double.minPositive
                              : setWidth,
                          height: setHeight,
                          child: ListView.builder(
                            itemCount: itemList.length,
                            itemBuilder: (context, index) {
                              return Card(
                                child: ListTile(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(8),
                                    side: BorderSide(
                                        width: 1, color: currentTextColor),
                                  ),
                                  title: Text(itemList[index]),
                                  trailing: IconButton(
                                    onPressed: () {
                                      setState(() {
                                        selectedItems.add(itemList[index]);
                                        itemList.removeAt(index);
                                      });
                                    },
                                    icon: const Icon(Icons.delete),
                                  ),
                                ),
                              );
                            },
                          ),
                        );
                      },
                    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search