unable to specify width to my container in listtile subtitle widget

Question

Design

I want to achieve this design, so i used list tile. But when i used container in subtitle it is taking whole width of list tile.

I tried using constrains but that didn't work for me.

And also tried giving with to container.

Answer 1

Here I made custom ListTile widget (based on your design) for you.

Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
  padding: const EdgeInsets.all(8),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Padding(
        padding: const EdgeInsets.only(left: 8),
        child: Row(
          children: [
            const CircleAvatar(
                backgroundImage:
                    AssetImage("assets/firebase-add-data-class.png"),
                radius: 28),
            const SizedBox(
              width: 8,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text("Vandor name",
                    style: TextStyle(fontSize: 28)),
                const SizedBox(
                  height: 4,
                ),
                InkWell(
                  onTap: () {},
                  child: Container(
                    width: 200,
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                        color: Colors.deepPurple,
                        borderRadius: BorderRadius.circular(8)),
                    child: const Center(
                      child: Text(
                        "Product Promotion",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
      TextButton(onPressed: () {}, child: const Text("View"))
    ],
  ),
),