Как создать ListView с картами, которые корректируют свой размер на основе относительных ограничений?

Question

Я использую FractionallySizedBox, чтобы воспользоваться его способностью выполнять относительные размеры.
Сейчас он возвращается к ListView.builder, но я также пытался поместить его в качестве оболочки для виджета Card (возвращая вместо этого, как основной виджет для ListView.builder), я попытался вернуть его как дочерний элемент для GestureDetector, все с треском провалились, чтобы получить результат, который я надеюсь получить, то есть 3 или n карт, которые берут n процент контейнера, в котором они находятся, без необходимости вручную устанавливать фиксированный размер.

Как правильно использовать Widget?

В соответствии с текущей конфигурацией я получаю ошибку:

The following RenderObject was being processed when the exception was fired: RenderFractionallySizedOverflowBox#d0391

Потому что:

  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)

Та же самая ошибка, высотой, равной бесконечности, также проявляется, когда я помещаю FractionallySizedBox в другом месте (как описано выше), даже если она содержится внутри четко определенного размера widget.

Это мой State класс:

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, i) {
            return FractionallySizedBox(
              heightFactor: .3,
              widthFactor: .8,
              child: Card(
                elevation: 10,
                child: Row(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10.0),
                      child: GestureDetector(
                        onTap: () {
                          print("tapped");
                        },
                        child: Container(
                          width: 100.0,
                          height: 100.00,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius:
                                BorderRadius.all(Radius.circular(75.0)),
                            boxShadow: [
                              BoxShadow(blurRadius: 7.0, color: Colors.black)
                            ],
                          ),
                        ),
                      ),
                    ),
                ),
              ),
            );
          },
        ),
      ),
    );
}

И это желаемый вывод:

Answer 1

FractionallySizedBox не может работать с представлением списка, поскольку имеет бесконечную высоту, а FractionallySizedBox воспринимает родительское трение, так что это создаст проблему бесконечной высоты.

вы можете использовать контейнер вместо него следующим образом.

  child: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, i) {
            // replace with container
            // keep 0.29 fraction to avoid scroll  
            return Container(
              height: MediaQuery.of(context).size.height * 0.29,
              width: MediaQuery.of(context).size.width * 0.8,
              child: Card(
                elevation: 10,
                child: Row(children: <Widget>[