如何在 Listtile 的前导和尾随之间对齐小部件？ - Flutter

Question

I would like to set the width of the progress bar equal to the width between Listtile´s leading and trailing but till now, I only can fit it to the entire width of the card. Do I need padding or something? This is my code (and screenshot of my view):

Card(
                  child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[ ListTile(
                    leading:  CircleAvatar(
                      backgroundImage:  AssetImage("assets/vegetables/" + activity.cropImgUrl),
                      backgroundColor: Colors.white,
                    ),
                    title: Text(activity.name),
                    subtitle: Text(howmanydaysleft(activity.daysLeft),
                    ),
                    trailing: Icon(Icons.chevron_left),
                    isThreeLine: false,
                  ),
                  ConstrainedBox(
                    constraints: const BoxConstraints(minWidth: double.infinity),
                    child: LinearPercentIndicator(
                            animation: true,
                            lineHeight: 15.0,
                            animationDuration: 500,
                            percent: completed / 100.0,
                            center: Text(completed.toString() + "%"),
                            linearStrokeCap: LinearStrokeCap.roundAll,
                            progressColor: colorGreenPrimary,
                          ),
                  ),
                  SizedBox(height: 10.0),
              ],
            ),
            ),

Screenshot

Answer 1

The title property of the ListTile basically does what you need. Wrap your text in a column and add the progress indicator after your text.

This should do the trick:

Card(
    child: ListTile(
        leading: CircleAvatar(
        backgroundImage:
            AssetImage("assets/vegetables/" + activity.cropImgUrl),
        backgroundColor: Colors.white,
        ),
        title: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
            Text(activity.name),
            LinearPercentIndicator(
            animation: true,
            lineHeight: 15.0,
            animationDuration: 500,
            percent: completed / 100.0,
            center: Text(completed.toString() + "%"),
            linearStrokeCap: LinearStrokeCap.roundAll,
            progressColor: colorGreenPrimary,
            ),
        ],
        ),
        subtitle: Text(
        howmanydaysleft(activity.daysLeft),
        ),
        trailing: Icon(Icons.chevron_left),
        isThreeLine: false,
    ),
);