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

Flutter – make ListTile clickable and add a hovercolor

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

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    Move this code to a new widget and let each rowListItem keep track of it’s own hovering state. No need to use a variable just set hoveringColor. I recommend you read the docs https://api.flutter.dev/flutter/material/InkResponse/hoverColor.html

    Code should look something like this

    import 'package:flutter/material.dart';

class RowListItem extends StatelessWidget {
  Widget build(BuildContext context) {
    return InkWell(
      key: ValueKey(item),
      onHover: (bool value) {
        handleChangeIsHovering(value);
      },
      hoverColor: Colors.red,
      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: Colors.yellow,
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search