How to make one text up and one move down? - flutter

Question

Design I want:
My current design:
Hello, I would like to ask how to make a text design like the picture that I want. Examples of waiting approval are above and 7 are below waiting approval. Can anyone help me?
This is my code:
Container(
height: 100,
width: 900,
alignment: Alignment.centerRight,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Expanded(
child: Text('Waiting Approval 7',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black),
textAlign: TextAlign.center),
),
),

Answer 1

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Waiting Approval', style: TextStyle(fontSize: 16),),
Text('7', style: TextStyle(fontSize: 16),)
],
),

Answer 2

Here you go
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container( decoration: BoxDecoration(
border: Border.all(color: Colors.grey,width: 0.5)),
child: Row(
children: [
Expanded(
child: Container(
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
border: Border(right: BorderSide(color: Colors.grey,width: 0.5))),
child: Column(children: const [
Text(
"Waiting Approval",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
),
),
SizedBox(height: 10.0),
Text(
"7",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
),
),
]),
),
),
Container(
color: Colors.red,
),
Expanded(
child: Container(
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
border: Border(left: BorderSide(color: Colors.grey,width: 0.5))),
child: Column(children: const [
Text(
"Upcoming Appointments",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
),
),
SizedBox(height: 10.0),
Text(
"7",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
),
),
]),
),
),
],
),
),
],
));
}

Answer 3

Use a Column widget for with two Text widget.
Container(
height: 100,
width: 900,
alignment: Alignment.centerRight,
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
children: [
Text('Waiting Approval',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black),
textAlign: TextAlign.center),
Text("7"),//second text, if you need space wrap with padding or include another sizedBox at top
],
),
),

Answer 4

if you want to have numbers under text your could add them in a separate widgets, Or use RichText instead.
for example you could use a function that takes in parameters text and number and generate a widget like: (Columnwith two childrens; text and number; bellow each others).
Then use that function twice in a row.

Answer 5

Use List Tile or use column
child: ListTile(
title: Text("aaaaa"),
subtitle: Text("111111"),
)
or
Column(
children:[
Text(""),
Text(""),
]
)

Answer 6

You can use
Column
use '\n ' with String interpolation
consider int itemCount carries the number,
1.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Waiting Approval'),
Text(itemNumber),
]
)
2. '\n ' with String interpolation
Text(
'Waiting for Approval \n ${itemCount}',
textAlign: TextAlign.center,
)