Виджет Flutter Flex

Question

У меня есть это состояние класса:

      class _ItemCardState extends State<ItemCard> {
  double imgSize = 30;
  Axis expanded = Axis.horizontal;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          expanded =
              expanded == Axis.horizontal ? Axis.vertical : Axis.horizontal;
          imgSize = imgSize == 30 ? 200 : 30;
        });
      },
      child: Card(
        margin: const EdgeInsets.all(5.0),
        child: Padding(
          padding: const EdgeInsets.all(15),
          child: Flex(
            direction: expanded,
            children: [
              Image.network(
                'http://cdn.shopify.com/s/files/1/0565/0697/4379/articles/Cafe-expresso-sin-maquina_1200x1200.jpg?v=1621619617',
                width: imgSize,
              ),
              Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(widget.product['name'],
                          style: const TextStyle(fontSize: 20)),
                      Text(widget.product['price'] + ' \$',
                          style: const TextStyle(fontSize: 15)),
                    ],
                  ),
                  Text(widget.product['ingredients'],
                      style: const TextStyle(fontSize: 15, color: Colors.grey)),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Я хочу, чтобы Flex Widget менял направление onTap, это работает. Но колонна внутри не занимает всего доступного места в crossAxis. Если я поставлю Expanded Widget, он перестанет работать... Я пробовал Flexibles, но почему-то это не сработало. Я также использовал ListTiles, но не смог заставить его работать.

Любая идея о том, как это сделать?

Answer 1

Что ж. Я решил это, поместив виджет Flex внутри SizedBox, а затем смог использовать Flexible>fit:FlexFit.tigth:

      SizedBox(
        height: 300,
        child: Flex(
          direction: expanded,
          children: [
            Image.network(
              'http://cdn.shopify.com/s/files/1/0565/0697/4379/articles/Cafe-expresso-sin-maquina_1200x1200.jpg?v=1621619617',
              width: imgSize,
            ),
            Flexible(
              fit: FlexFit.tight,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(widget.product['name'],
                          style: const TextStyle(fontSize: 20)),
                      Text(widget.product['price'] + ' \$',
                          style: const TextStyle(fontSize: 15)),
                    ],
                  ),
                  Text(widget.product['ingredients'],
                      style: const TextStyle(
                          fontSize: 15, color: Colors.grey)),
                ],
              ),
            )
          ],
        ),
      ),