So I have ListView.builder and some content in it. As you can see in the code, I tried with both ListTile and Row but (all the) content won't stay in the center(vertically). Any change in the size of the icon, or the ListTile itself messes it up more.

  child: ListView.builder(
    itemExtent: size * 0.3,
    itemBuilder: (context, index) => Column(
      children: [
        const Divider(
          //height: 2,
          color: color,
          thickness: 1,
        ),

        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: size * 0.2,
              //padding: EdgeInsets.only(bottom: 0),
              child: IconButton(
                icon: const Icon(
                  Icons.play_circle_outlined,
                  size: 50,
                  color: Colors.black,
                ),
                onPressed: () {},
              ),
            ),
            Column(
              children: [
                Text(
                  'Recording ' '${index   1}',
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Text(
                  '00:20',
                  style: TextStyle(color: Colors.black),
                ),
              ],
            ),
            IconButton(
              icon: const Icon(
                Icons.more_vert,
                size: 35,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            // ),
          ],
        ),
        // Divider(
        //   color: color,
        //   thickness: 1,
        // ),

        // ListTile(
        //   dense: true,
        //   leading: IconButton(
        //     icon: const Icon(
        //       Icons.play_circle_outlined,
        //       size: 40,
        //       color: Colors.black,
        //     ),
        //     onPressed: () {},
        //   ),
        //   //),
        //   trailing: Container(
        //     height: double.infinity,
        //     child: IconButton(
        //       icon: const Icon(
        //         Icons.more_vert,
        //         size: 35,
        //         color: Colors.black,
        //       ),
        //       onPressed: () {},
        //     ),
        //   ),
        //   title: Text(
        //     'Recording ' '${index   1}',
        //     style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        //   ),
        //   subtitle: Text(
        //     '00:20',
        //     style: TextStyle(color: Colors.black),
        //   ),
        // ),
      
      ],
    ),
    itemCount: 3,
  ),

How can I keep the content centered all the time, so that changing the height of the Row/ListTile or the icon size doesn't mess up the structure?

EDIT:

This looks centered, but I want the play icon to be bigger and also the overall height of the ListTile. If I try to increase any of those, it messes it up.

CodePudding user response：

You should just remove itemExtent and put your Row in a Container and give the height to Container. also set your mainAxisAlignment of your title Column to MainAxisAlignment.center.

ListView.builder(
    // itemExtent: size * 0.3,
    itemBuilder: (context, index) => Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Divider(
          height: 1,
          color: Colors.red,
          thickness: 1,
        ),
        Container(
          height: size * 0.3,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: size * 0.2,
                //padding: EdgeInsets.only(bottom: 0),
                child: IconButton(
                  icon: const Icon(
                    Icons.play_circle_outlined,
                    size: 50,
                    color: Colors.black,
                  ),
                  onPressed: () {},
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Recording ' '${index   1}',
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Text(
                    '00:20',
                    style: TextStyle(color: Colors.black),
                  ),
                ],
              ),
              IconButton(
                icon: const Icon(
                  Icons.more_vert,
                  size: 35,
                  color: Colors.black,
                ),
                onPressed: () {},
              ),
              // ),
            ],
          ),
        ),
        // Divider(
        //   color: color,
        //   thickness: 1,
        // ),

        // ListTile(
        //   dense: true,
        //   leading: IconButton(
        //     icon: const Icon(
        //       Icons.play_circle_outlined,
        //       size: 40,
        //       color: Colors.black,
        //     ),
        //     onPressed: () {},
        //   ),
        //   //),
        //   trailing: Container(
        //     height: double.infinity,
        //     child: IconButton(
        //       icon: const Icon(
        //         Icons.more_vert,
        //         size: 35,
        //         color: Colors.black,
        //       ),
        //       onPressed: () {},
        //     ),
        //   ),
        //   title: Text(
        //     'Recording ' '${index   1}',
        //     style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        //   ),
        //   subtitle: Text(
        //     '00:20',
        //     style: TextStyle(color: Colors.black),
        //   ),
        // ),
      ],
    ),
    itemCount: 3,
  ),