Enlarging/focusing on middle list tile in list view-CodePudding

I have a list view with some list tiles:

 return Scaffold(
  body: ListView(
    children: const [
      ListTile(title: Text("1", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("2", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("3", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("4", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("5", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("6", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("7", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("8", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
      ListTile(title: Text("9", textAlign: TextAlign.center,), contentPadding: EdgeInsets.all(30), tileColor: Colors.red),
    ],
  ),
);

Is there any way to always have the text in the middle list tile slightly enlarged to make it appear in focus? In this example, 4 would be enlarged and if I were to scroll down 5 would become enlarged.

Here is the effect I'm aiming for:

This doesn't necessarily have to be done within a list tile, I'm just looking to recreate this effect of putting the middle widget on the screen in focus in a list view.

CodePudding user response：

Interestingly, a built-in widget called ListWheelScrollView has a magnification property that you can set. Also, you can write for-loop in a list, so you don't have to copy-paste the 10 items like your demo code.

For example:

  ListWheelScrollView(
    itemExtent: 80,
    useMagnifier: true,
    magnification: 1.5, // magnify the center item 1.5x 
    perspective: 0.00001,
    children: [
      for (int i = 1; i < 10; i  )
        ListTile(
          title: Text('$i', textAlign: TextAlign.center),
          contentPadding: EdgeInsets.all(30),
          tileColor: Colors.red,
        ),
    ],
  )