skip to Main Content

For this screen:

enter image description here

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


  1. 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: () {},
        ),
      ],
    ),
    

    also your second issue, space between the two rows is because of icon button size in second row, change it to this:

    SizedBox(
      height: 24,
      width: 24,
      child: IconButton(
        padding: EdgeInsets.zero,
        icon: const Icon(Icons.refresh),
        onPressed: () {},
      ),
    ),
    

    enter image description here

    Login or Signup to reply.
  2. Just put some left padding in date text,

    Padding(
      padding:EdgeInsets.only(left: 30),
      child:Text(DateFormat('d/M/y').format(DateTime.now()).toString()),
    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search