Flutter 嵌套 Row 和 ListView 的扩展高度

Question

I have a Card inside a ListView which should be like the picture above.

//Code has been simplified by removing most theme.
ListView(
          children: [
            Card(
              child: Row(children: [
                Container(
                  color: Colors.red,
                  width: 8,
                  height: double.infinity, //Promblem here!!!
                ),
                SizedBox(width: 8),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        'Detail',
                      ),
                      Text('Detail'),
                      SizedBox(
                        width: double.infinity,
                        child: Text(
                          DateTime.now().toString(),
                          textAlign: TextAlign.end,
                        ),
                      ),
                    ],
                  ),
                )
              ]),
            ),
          ]),

The problem is the Container with red color. It's a red vertical line as a notification thing. I want it to as high as Row or Card, but keep a limited width like 4.

So I have tried height: double.infinity and Expanded with the Container. It's either an exception or an overflow. And also, trying to wrap the Row with Expanded cause another layout exception.

So how to make this red vertical line have a properly height?

Answer 1

Easy way to Achieve this is:

ListView(
        children: [
          ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),
          ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),
          ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),

        ],
      ),