how to widget height fill to parent (or get parent size) in Flutter?

Question

I am new to flutter, and I having trouble with my ListView. My ListView contains many items, the item of ListView includes question content and some comments of users.

The item height is automatically decided by its children height, also the first children of the item (deepOrange Container below) height is dependent to parent item height (is't the item of ListView), its height must be fill to parent item.

The items size of ListView dependent to its children items size, also the first widget (Container below) in the item is dependent to parent item too.

How i can do this?

I'm very very sorry, English is not my primate language, my English is very poor. Here is my code:

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class MainPage extends StatefulWidget {
  const MainPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var items = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: items.map((item) => Row(
          /*I can't compute the real rendered height of the item by it's children content, because it's possible contain many replay message, different font size etc.*/
          children: <Widget>[
            Container(
              width: 5.0,
              /**
               * I want to fill the height to parent widget of the container,
               * (I want to make an timeline widget, it's should max height to its parent.)
               * but i can't get parent items size, or double.infinity etc,
               */
              height: 80.0, // How to fill the height to parent of the property? or how to get parent item size (or actually rendered height)?
              color: Colors.deepOrange,
            ),
            SizedBox(width: 10.0,),
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text("there is long comment of users, there is long comment of users, there is long comment of users, there is long comment of users, there is long comment of users, $item"),
                  /*
                  Also here is a lists of replay message by another user.
                  * */
                  Column(children: <Widget>[
                    Text("replay 1"),
                    Text("replay 2"),
                    Text("replay 3"),
                    Text("replay N"),
                  ],),
                  Row(
                    children: <Widget>[
                      IconButton(icon: Icon(Icons.favorite)),
                      IconButton(icon: Icon(Icons.delete)),
                      IconButton(icon: Icon(Icons.message)),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),).toList(),
      ),
    );
  }
}

I simply want to fit that purple Container's height to the parent container. Thank you in advance.

Answer 1

Wrap your list in a container. Then set the height to the screen size. You can get that through the MediaQuery.

var screenSize = MediaQuery.of(context).size;
Container(
   height: screenSize.height,
   width: screenSize.width,
   child: ListView(...));