Question 199427 in Flutter Question posted in
The official Flutter documentation can be found here.

How to change icons in ReorderableListView.builder in flutter

I’m making a list, but I wanted to make a list that changes the order to drag and drop, so I made a list using ReorderableListView.builder.

I want to change the "=" shape on the right side of each widget to another icon, or adjust the position.
What should I do?

enter image description here

ReorderableListView.builder(
          itemBuilder: (context, index) {
            final item = items!.elementAt(index);
            return GestureDetector(
              key: Key("$index"),
               onLongPress: () {
              ....
              },
              onTap: () {
              ....
                setState(() {});
              },
              child: Container(
                margin: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: const Offset(0, 3),
                    ),
                  ],
                  border: Border.all(),
                  borderRadius: BorderRadius.circular(10),
                  color: const Color.fromARGB(255, 60, 183, 255),
                ),
                height: 60,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 20),
                      child: Text(
                        items!.elementAt(index).split("|")[0],
                        style: const TextStyle(fontSize: 25),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                       ....
                      },
                      child: const Padding(
                        padding: EdgeInsets.only(right: 30),
                        child: Icon(
                          Icons.delete_forever_rounded,
                          size: 30,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
          itemCount: items?.length ?? 0,
          onReorder: (int oldIndex, int newIndex) {
            setState(() {
              if (newIndex > oldIndex) {
                newIndex -= 1;
              }
              final item = items!.removeAt(oldIndex);
              items!.insert(newIndex, item);
              saveData();
            });
          },
        ),

I’ve tried googling, but I can’t find a way to get rid of the icon but change it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it.

    ReorderableListView(
        children: <Widget>[
          for (int index = 0; index < items!.length; index += 1)
            ListTile(
              key: Key('$index'),
              tileColor: Colors.transparent,
              title: Padding(
                padding: const EdgeInsets.only(
                  bottom: 5,
                  top: 5,
                ),
                child: Container(
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: const Offset(0, 3),
                      ),
                    ],
                    border: Border.all(),
                    borderRadius: BorderRadius.circular(10),
                    color: const Color.fromARGB(255, 60, 183, 255),
                  ),
                  height: 60,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Padding(
                        padding: EdgeInsets.only(
                          left: 5,
                        ),
                        child: Icon(
                          Icons.table_rows_rounded,
                          size: 30,
                        ),
                      ),
                      Expanded(
                        child: GestureDetector(
                          onLongPress: () {
                            ...
                          },
                          child: Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: Text(
                              items!.elementAt(index).split("|")[0],
                              style: const TextStyle(fontSize: 25),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          ....
                        },
                        child: const Padding(
                          padding: EdgeInsets.only(right: 10),
                          child: Icon(
                            Icons.delete_forever_rounded,
                            size: 35,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              onTap: () {
                ....
              },
            ),
        ],
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final String item = items!.removeAt(oldIndex);
            items!.insert(newIndex, item);
            saveData();
          });
        },
      ),

  2. 0

    Set buildDefaultDragHandles false on the ReorderableListView. This will remove the default handle.

    Then, in your Row, wherever you want the icon, ReorderableDragStartListener with the Icon as the child. This will allow the item to be dragged.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search