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),
  ),
),

CodePudding user response：

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

CodePudding user response：

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,
                          ),
                        ),
                      ]),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }

CodePudding user response：

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
    ],
  ),
),

CodePudding user response：

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.

CodePudding user response：

Use List Tile or use column

 child: ListTile(
 title: Text("aaaaa"),
 subtitle: Text("111111"),
  )

 or

Column(
children:[

Text(""),

Text(""), 
]
)
                   

CodePudding user response：

You can use

1. Column
2. 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,
)