CODEWITHSUNDEEP
flutter
Smith
Smith

Reputation: 591

How to change color of selected item in ListWheelScrollView?

I have a ListWheelScrollView widget. I need that when I scroll the list, the font color of the selected item changes, something like highlighting. How can this be implemented?

Update: Still no idea how to implement this...

body: new Column(
          children: <Widget>[
               ListWheelScrollView.useDelegate(
                  perspective: 0.001,
                  diameterRatio: 10,
                  useMagnifier: true,
                  itemExtent: _itemHeight,
                  childDelegate: ListWheelChildLoopingListDelegate(
                    children: _values
                        .map(
                          (value) => SizedBox(
                            width: MediaQuery.of(context).size.width,
                            height: _itemHeight,
                            child: Container(
                              margin: EdgeInsets.fromLTRB(0, 0.0, 0.0, 3),
                              color: Colors.white,
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                    '$value',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontWeight: FontWeight.w600,
                                        fontSize: 17,
                                        color:
                                            Color...,
                                  ),
                                ),
                                ),
                              ),
                            ),
                          ),
                        )
                        .toList(),
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

Upvotes: 2

Views: 3268

Answers (2)

Yassir Makloul
Yassir Makloul

Reputation: 11

First, you need to define a state _selectedItemIndex:

int _selectedItemIndex = 0;

Because ListwheelScrollView has a Function called onSelectedItemChanged that you can use to highlight an item.

 child: new ListWheelScrollView.useDelegate(
              onSelectedItemChanged: (index) {
                setState(() {
                  _selectedItemIndex = index;
                });
              },

After setting the state of the index each time it is changed with the function above, you can now change the through color in the container made in your childDelegate:

              childDelegate: ListWheelChildLoopingListDelegate(
                children: _values
                    .map(
                      (value) => SizedBox(
                        child: Container(
                          color: Colors.white,
                            child: Text(
                                '$value',
                                style: TextStyle(
                                    color:
                                        _selectedItemIndex == _values.indexOf(value)
                            ? Colors.pink
                            : Colors.grey,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  .toList(),
                 )

I only tried to analyse and fix the logic of the color changing. I am not sure about the rest. Hopefully I have been of use to you.

Upvotes: 1

Can Karabag
Can Karabag

Reputation: 1751

ListWheelScrollView has FixedExtentScrollController property. Could reach selectedItem with this controller.

int get selectedItem {
  assert(
    positions.isNotEmpty,
    'FixedExtentScrollController.selectedItem cannot be accessed before a '
    'scroll view is built with it.',
  );
  assert(
    positions.length == 1,
    'The selectedItem property cannot be read when multiple scroll views are '
    'attached to the same FixedExtentScrollController.',
  );
  final _FixedExtentScrollPosition position = this.position;
  return position.itemIndex;
}

It returns int type and you could customize it into your list.

Upvotes: 1

Related Questions