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),
),
),
),
2
Answers
You can put another
IconButton
with0
opacity to get this:also your second issue, space between the two rows is because of icon button size in second row, change it to this:
Just put some left padding in date text,