Home > Enterprise >  Is there any way to topRight align ExpansionTile trailing icon
Is there any way to topRight align ExpansionTile trailing icon

Time:08-25

How to make the expansionTile trailing icon top align. by default it aligns to the center, below I have attached the screenshot of the desired output.

enter image description here

  ClipRRect(
          borderRadius: BorderRadius.circular(4),
          child: ExpansionTile(
            tilePadding: EdgeInsets.all(15),
            collapsedBackgroundColor: Color.fromRGBO(24, 34, 62, 1),
            backgroundColor: Color.fromRGBO(24, 34, 62, 1),
            iconColor: Colors.white,
            collapsedIconColor: Colors.white,
            expandedCrossAxisAlignment: CrossAxisAlignment.start,
            title: Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "text".toUpperCase(),
                      style: TextStyle(
                        color: Color.fromARGB(255, 14, 248, 26),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'How to make trailing icon top align   ',
                                style: TextStyle(
                                    fontWeight: FontWeight.w600,
                                    color: Color.fromRGBO(0, 249, 85, 1),
                                    fontSize: 12),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 3),
                                constraints: const BoxConstraints(minWidth: 80),
                                decoration: BoxDecoration(
                                    color: Color.fromRGBO(226, 80, 95, 1),
                                    borderRadius: BorderRadius.circular(2)),
                                padding:
                                    const EdgeInsets.symmetric(vertical: 2),
                                child: Text(
                                  'label',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontSize: 10,
                                      fontWeight: FontWeight.w600),
                                ),
                              )
                            ],
                          ),
                          Text(
                            '40%',
                            style: TextStyle(
                                fontSize: 20,
                                color: Color.fromARGB(255, 14, 248, 26),
                                fontWeight: FontWeight.w700),
                          )
                        ],
                      ),
                    )
                  ],
                )
              ],
            ),
            children: const <Widget>[
              ListTile(title: Text('This is tile number 1')),
            ],
          ),
        ),`

here's the link to my enter image description here

  • Related