I can't figure out how I can align my Icon buttons vertical in a row. Here is my code:

        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.fast_rewind, size: 30),
              alignment: Alignment.center,
              onPressed: workoutBloc.player.hasPrevExercise ?  workoutBloc.player.previousExercise : null,
            ),
            IconButton(
              icon: Icon(Icons.skip_previous, size: 30),
              onPressed: workoutBloc.player.hasPrevSet ? workoutBloc.player.previousSet : null
            ),
            IconButton(
              icon: workoutBloc.player.isPlaying ? Icon(Icons.pause, size: 45) : Icon(Icons.play_arrow, size: 45),
              onPressed: workoutBloc.player.hasEnded ? null :  () {
                setState(() {});
                workoutBloc.playPause();
              },
            ),
            IconButton(
              icon: Icon(Icons.stop, size: 45,),
              onPressed: workoutBloc.player.state != 'REST' ? () {
                workoutBloc.stopSet();
              } : null
            ),
            IconButton(
              icon: Icon(Icons.skip_next, size: 30),
              onPressed: workoutBloc.player.hasNextSet ? workoutBloc.player.nextSet : null,
            ),
            IconButton(
              icon: Icon(Icons.fast_forward, size: 30),
              onPressed: workoutBloc.player.hasNextExercise ? workoutBloc.player.nextExercise : null
            )
          ],
        )

I have set the crossAxisAlignemnt to center but thats not working. I also tired alignment: Alignment.center for a Icon button but its not working either. It look like this:

enter image description here


Solution 1: salihgueler

So, the problem can be seen with the help of the Flutter Inspector. You are changing the Icon size in the icon object. Therefore the parent IconButton is not wrapping the size of it, instead it is pushing it.

enter image description here

For fixing it, if you move the size of the icon to iconSize property of the IconButton, you will have what you desired.

     Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconButton(
            iconSize: 30,
            icon: Icon(Icons.fast_rewind),
            alignment: Alignment.center,
            onPressed: null,
          ),
          IconButton(
              iconSize: 30,
              icon: Icon(Icons.skip_previous), onPressed: null),
          IconButton(
            iconSize: 45,
            icon: Icon(Icons.play_arrow),
            onPressed: null,
          ),
          IconButton(iconSize: 45, icon: Icon(Icons.stop), onPressed: null),
          IconButton(
            iconSize: 30,
            icon: Icon(Icons.skip_next),
            onPressed: null,
          ),
          IconButton(
              iconSize: 30,
              icon: Icon(Icons.fast_forward), onPressed: null)
        ],
      )

enter image description here