将行项目对齐到列小部件内的特定位置

Question

很难将行小部件内的行项目放置在像这样的图像的特定边缘位置：

Padding(
    padding: const EdgeInsets.all(10.0),
    child: Column(
      children: <Widget>[
        values('Date', ': ${DateFormat('MMM dd, yyyy, hh:mm a').format(DateTime.parse(date))}', false),
        values('Description', ': $description', false),
      ],
    ),
  ),



Widget values(String title, String value, bool isAmount) {
    return Row(
      children: <Widget>[
        Text(
          title,
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey),
        ),
        Spacer(),
        Text(
          value,
          style: TextStyle(
            color: isAmount ? Color(0xFF34B3C1) : Colors.black87,
          ),
        ),
        Spacer(),
      ],
    );
  }

Answer 1

Expanded和

flex实现此目的，

  Widget values(String title, String value, bool isAmount) {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey),
          ),
        ),
        Spacer(),
        Expanded(
          flex: 7,
          child: Text(
            value,
            style: TextStyle(
              color: isAmount ? Color(0xFF34B3C1) : Colors.black87,
            ),
          ),
        ),
        Spacer(),
      ],
    );
  }