I can't use the wrap widget side by side - flutter

Question

*Create 20 container widgets side by side using the «wrap» widget
*Leave a 3-pixel space between them horizontally.
*Place the containers in the middle of the screen and type 1-2-3-4-5 in them.
I need to design a container widget in line with the above prompts, but when I ran the code I wrote, I saw that the containers are not side by side? What am I doing wrong?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()
{runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home:Scaffold(
appBar: AppBar(
title: Text(
"Containers in wraps",
style: TextStyle(color:Colors.greenAccent.shade400),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing:3.0,
runAlignment: WrapAlignment.center,
runSpacing:3.0,
children: [
Expanded(
child: Container(
color: Colors.grey,
child: Center(
child: Text(
"1",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"2",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"3",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"4",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.blue,
child: Center(
child: Text(
"5",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
],
),
),
),
),
);
}

Answer 1

Instead of Expanded use UnconstraindedBox. Following code should help:
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
"Containers in wraps",
style: TextStyle(color: Colors.greenAccent.shade400),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing: 3.0,
runAlignment: WrapAlignment.center,
runSpacing: 3.0,
children: [
UnconstrainedBox(
child: Container(
constraints: const BoxConstraints.tightFor(),
color: Colors.grey,
child: const Center(
child: Text(
"1",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"2",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"3",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"4",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.blue,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"5",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
],
),
),
),
),
);
}