skip to Main Content

I have the following List.
I would like the scale Icons (on the right) to be aligned.
The top should be in the same spot as the one underneath.

enter image description here

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding:
          const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
      child: Slidable(
        endActionPane: ActionPane(motion: StretchMotion(), children: [
          //delete option
          SlidableAction(
            onPressed: deleteTapped,
            backgroundColor: Colors.red.shade400,
            icon: Icons.delete,
            borderRadius: BorderRadius.circular(8),
          )
        ]),
        child: Container(
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Color(0xFFD9F0FF),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              const Icon(
                Icons.date_range_outlined,
                color: Color(0xFF006B8F),
              ),
              const SizedBox(width: 8),
              Text(date,
                  style: const TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 18,
                      color: Color(0xFF006B8F))),
              const Spacer(),
              const Text(
                "|",
                style: TextStyle(
                    fontSize: 18,
                    color: Color(0xFF006B8F),
                    fontWeight: FontWeight.bold),
              ),
              const Spacer(),
              const Icon(
                Icons.monitor_weight_outlined,
                color: Color(0xFF006B8F),
              ),
              const SizedBox(width: 8),
              Text(weight + " kg",
                  style: const TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 18,
                      color: Color(0xFF006B8F))),
            ],
          ),
        ),
      ),
    );
  }
}

I have tried several things, like putting the Icon and the text in a container but with no luck.

Any help appreciate it!

2

Answers


  1. While you are already using Spacer on both Size, you can use

    textAlign: TextAlign.center,

     const Text(
      "|",
      textAlign: TextAlign.center,
      style: TextStyle(
          fontSize: 18,
          color: Color(0xFF006B8F),
          fontWeight: FontWeight.bold),
    ),
    

    Without spacer, it can be

    Expanded(
      child: const Text(
        "|",
        textAlign: TextAlign.center,
        style: TextStyle(
            fontSize: 18,
            color: Color(0xFF006B8F),
            fontWeight: FontWeight.bold),
      ),
    ),
    
    Login or Signup to reply.
  2. try this:

          Column(
                  children: [
                    IntrinsicHeight(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Row(
                            children: [
                              //left part
                            ],
                          ),
                          VerticalDivider(),
                          Row(
                            
                            children: [
                              //right part
                            ],
                          )
                        ],
                      ),
                    ),
                    ....
                    
                  ],
                )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search