How to write text below the container in row - flutter

Question

I have always struggled with making this ui dynamically. Its a row of 4 or can be more than 4 containers with images in it and below that row there is text showing the name of the category made. I currently doing the name part with padding's according to my own device but it slips away in larger or smaller screen size devices other than mine. How can I tackle this. Image is also attached for better understanding if required. Also in the next code named intopage I am trying to stick the please read lines and the terms and conditions, privacy policy to the bottom but it isn't sticking
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/salonicon.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/hairdresser.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/facial-massage.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/body-massage.png",
scale: 1.2, color: Colors.white),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text(
"Salons".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 50.0),
child: Text(
"Hair".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 60.0),
child: Text(
"Skin".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 65.0),
child: Text(
"Body".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
],
),
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fill,
),
Padding(
padding: const EdgeInsets.only(
top: 550,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 650,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 750,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 760,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)
],
),
),
);
}
}

Answer 1

Use row then columns to specify them according to your needs it took me 3 minutes to change your code according to your needs super easy just practice a couple of times and you won' forget it.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: const DecorationImage(
image: AssetImage('assets/rnpic.png'),
fit: BoxFit.fill,
),
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(),
child: Align(
alignment: Alignment.topRight,
child: Container(
width: 70,
height: 30,
decoration: BoxDecoration(
color: const Color(0xFFFF6D00),
border: Border.all(
color: const Color(0xFFFF6D00)),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(20.0),
)),
child: const Center(
child: Text(
"-50% OFF",
style: TextStyle(color: Colors.white),
),
),
),
),
)
],
),
),
],
),
const SizedBox(
width: 150,
child: Center(
child: Text(
"Colorado Salon special hairstyle",
style:
TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
),
),
Container(
width: 80,
height: 30,
decoration: const BoxDecoration(
color: Color(0xFFFF6D00),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Center(
child: Text(
"View".toUpperCase(),
style: const TextStyle(
fontWeight: FontWeight.w600, color: Colors.white),
),
),
),
],
)
],
),

Answer 2

Make the layout like this
Row(
mainAxisAlignment : MainAxisAlignment.spaceBetween,
children:[
//item 1
Column(
children:[
Icon(),
Text(),
]
),
//item 2
Column(
children:[
Icon(),
Text(),
]
),
//item 3
Column(
children:[
Icon(),
Text(),
]
)
]
)