For this screen:

I would like to make the date in black be in center like the code in orange, and the refresh button follows the date, which may be a little bit on the right. Secondly, how can I reduce the height of space in between orange code and the date, and in between the date and the search item.

Here is part of my code:

Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
            child: Text(
              adminPassword(_today),
              style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                  color: Colors.orange[800]),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children:[
              Center(
                child: Text(DateFormat('d/M/y').format(_today).toString()),
              ),
              IconButton(
                icon: const Icon(Icons.refresh),
                onPressed: () {
                  setState(() {
                    _today = DateTime.now();
                  });
                },
              ),
            ],
           ),
          Padding(
            padding: const EdgeInsets.fromLTRB(12, 10, 12, 20),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: 'Search Item'),
              controller: _searchItemController,
            ),
          ),
          Container(
            height: 45,
            width: 250,
            decoration: BoxDecoration(
                color: Colors.teal, borderRadius: BorderRadius.circular(16)),
            child: TextButton(
              onPressed: () {}
              child: Text(
                'Search',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),

CodePudding user response：

You can put another IconButton with 0 opacity to get this:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Opacity(
      opacity: 0,
      child: IconButton(
        icon: const Icon(Icons.refresh),
        onPressed: () {},
      ),
    ),
    Text('asdasdasdasd'),
    IconButton(
      icon: const Icon(Icons.refresh),
      onPressed: () {},
    ),
  ],
),

CodePudding user response：

Just put some left padding in date text,

Padding(
  padding:EdgeInsets.only(left: 30),
  child:Text(DateFormat('d/M/y').format(DateTime.now()).toString()),
),