Flutter: ListWheelScrollView magnifier not working

Question

The magnifier of the ListWheelScrollView is empty (just a white container)

ListWheelScrollView(
  itemExtent: 60,
  magnification: 2,
  useMagnifier: true,
  children: List.generate(
     100,
      (index) => Card(
          key: ValueKey(index),
          color: Colors.blue,
          child: ListTile(
            title: Text(index.toString()),
          ))).toList(),
),

What am I doing wrong? (No errors are shown when running flutter run -v and flutter doctor -v finds no issues)

Solution

1. You can use Container instead of Card and set horizontal padding for it:

ListWheelScrollView(
  itemExtent: 60,
  magnification: 1.5,
  useMagnifier: true,
  squeeze: 0.7,
  children: List.generate(
    100,
    (index) => Container(
      key: ValueKey(index),
      padding: EdgeInsets.symmetric(horizontal: 100),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: ListTile(
        title: Text(index.toString()),
      ),
    )).toList(),
),

Result:

2. Instead of using ListTile and horizontal padding, you can put the text inside a Center widget that is placed directly inside the Container:

ListWheelScrollView(
  itemExtent: 60,
  magnification: 1.5,
  useMagnifier: true,
  squeeze: 0.7,
  children: List.generate(
    100,
    (index) => Container(
      key: ValueKey(index),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(index.toString()),
      ),
    )).toList(),
),

Result: