Align multiple button in center of flutter webpage - flutter

Question

I am trying to align the bottom section on the page to center, this shows correctly on a Mobile device but in the web it looks off. How do I arrange all 4 music buttons and text able in the center of the page. I tried Align friand center but both didn't bring those to the center of the widget. My goal is to get a button in the center of page based on page size, if page size is small below code is good but when i maximize browser it doesn't show in center.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.7,
// child: Expanded(child: slider()),
child: kIsWeb ? null : slider(),
),
Marquee(
child: Text(inuseAudioinfo.title ?? appname,
softWrap: true,
style: TextStyle(
// color: AppColors.black.withAlpha(90),
color: AppColors.black.withAlpha(150),
fontSize: 16,
)),
),
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.red[300]),
// bottom: BorderSide(color: AppColors.white)
)),
child: Wrap(
spacing: kIsWeb
? MediaQuery.of(context).size.width * 0.1
: 25, // space between two icons
children: <Widget>[
IconButton(
icon: Icon(
inuseAudioinfo.isRepeat
? Icons.repeat_one
: Icons.repeat,
color: inuseAudioinfo.isRepeat
? AppColors.brown
: AppColors.black,
),
onPressed: () {
print("User clicked Repeat one.");
if (inuseAudioinfo.playId != null) {
Duration seekdur = new Duration(seconds: 10);
if (inuseAudioinfo.isRepeat) {
setState(() {
inuseAudioinfo.isRepeat = false;
});
} else {
setState(() {
inuseAudioinfo.isRepeat = true;
});
}
} else {
commonmethod.displayDialog(
context,
"",
"Please select song to play.",
Icon(
Icons.library_music,
size: 100,
color: AppColors.red200,
),
);
}
},
),
IconButton(
icon: Icon(
inuseAudioinfo.isPlaying
? Icons.pause
: Icons.play_arrow,
color: AppColors.black,
),
onPressed: () {
_player(_songId);
}),
IconButton(
icon: Icon(
Icons.stop,
color: AppColors.black,
),
onPressed: () {
if (inuseAudioinfo.isPlaying) {
// _inuseAudioinfo.audioPlayer.stop();
inuseAudioinfo.duration =
new Duration(seconds: 0);
inuseAudioinfo.audioPlayer.stop();
setState(() {
inuseAudioinfo.isPlaying = false;
// position = new Duration(seconds: 0);
// _duration = new Duration();
});
}
// isPlaying = false;
}),
IconButton(
icon: Icon(
Icons.shuffle,
color: inuseAudioinfo.isShuffle
? AppColors.brown
: AppColors.black,
),
onPressed: () {
if (inuseAudioinfo.isShuffle) {
setState(() {
inuseAudioinfo.isShuffle = false;
});
} else {
setState(() {
inuseAudioinfo.isShuffle = true;
});
}
}),
],
),
),
// ),
// ),
],
)

Answer 1

remove Wrap() and use Row(mainAxisAlignment: MainAxisAlignment.center,)