make ListTile clickable and add a hovercolor

Question

Widget generateReorderableList() {
    return Column(
      children: [
        Stack(
          children: [
            SizedBox(
                width: double.infinity,
                height: 600, //A modifier
                child: 
                  ReorderableListView(
                    header: Column(
                      children: [
                        Row(
                          children: [
                            for (final item in headersList)
                              Container(
                                padding: const EdgeInsets.all(19.0),
                                child: DefaultTextStyle(
                                  style: const TextStyle(
                                    fontSize: 16.0,),
                                  child: item,
                                ),
                              ),
                          ],
                        ),
                        const CustomSeparator()
                      ],
                    ),
                    onReorder: (int oldIndex, int newIndex) { 
                      handleDraggable(newIndex, oldIndex);
                    },
                    children: [
                      for (final item in rowsList)
                      InkWell(
                        key: ValueKey(item),
                        onHover: (bool value){
                          handleChangeIsHovering(value);
                        },
                        hoverColor: isHovering ? Colors.red : Colors.blue ,
                        onTap: () {
                          onClickRow != null
                            ? (bool? selected) {
                                onClickRow!(item.item);
                              }
                            : null;
                        },
                        child: ListTile(
                          key: ValueKey(item),
                          title: Container(
                            padding: const EdgeInsets.only(left: 10.0),
                            child: DefaultTextStyle(
                              style: const TextStyle(
                                color: Colors.black,
                                fontSize: 14.0,
                              ),
                              child: item.widgets.first
                            ),
                          ),
                          onFocusChange: onClickRow != null
                            ? (bool? selected) {
                                onClickRow!(item.item);
                              }
                            : null,
                          selected: item.selected ?? false,
                          mouseCursor: SystemMouseCursors.click,
                          hoverColor: isHovering ? Colors.yellow : Colors.green ,
                        ),
                      ),
                    ],
                  ),
            ),
            if (button != null)
              Positioned(
                  top: 12,
                  right: 33,
                  child: InkWell(
                      child: MouseRegion(
                          cursor: SystemMouseCursors.click,
                          child: GestureDetector(
                              onTap: () {
                                button!();
                              },
                              child: Container(
                                  decoration: BoxDecoration(color: Theme.of(context).colorScheme.surfaceVariant, borderRadius: BorderRadius.circular(100)),
                                  padding: const EdgeInsets.all(2),
                                  child: const Align(
                                      child: Icon(
                                    Icons.add,
                                    color: Colors.white,
                                    size: 24,
                                  )))))))
          ],
        ),
        if (rowsList.isEmpty) const SizedBox(width: double.infinity, child: Text('Aucune donnée', textAlign: TextAlign.center, style: TextStyle(fontStyle: FontStyle.italic)))
      ],
    );
  }

Hello, I can't get my lines to have colors depending on whether they are hovered or not. The blue and red colors appear when I move the lines ^^ sometimes it's red, sometimes it's blue, I don't understand.

Same for onFocusChange, I can't seem to redirect to onClickRow.

trying to get a holder and an onClickRow

Answer 1

you can explore MouseRegion widget to control the hover : https://api.flutter.dev/flutter/widgets/MouseRegion-class.html