Flutter: Container with two Expanded and a background image

Question

UPDATED WITH THE ENTIRE SCREEN CODE

I wonder if anyone can help me with this?

I have a Listview, and in the construction of your itemBuilder, I intend to have a Container divided by two Expanded. However, in the first Expanded, I intend to put the image of a product as background, and in the second your information.

How information is dynamic, Container cannot have fixed size. For, the second Expanded can grow, and the first should follow the second in height.

In the code below the texts are fixed.

I only managed to get to where I am by informing a HEIGHT for the first Expanded, which I wanted to be dynamic.

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

class NewDeliveryEst2 extends StatefulWidget {
  NewDeliveryEst2({Key key}) : super(key: key);

  _NewDeliveryEstState createState() => _NewDeliveryEstState();
}

class _NewDeliveryEstState extends State<NewDeliveryEst2> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Stack(
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(top: 115, bottom: 0),
                  height: MediaQuery.of(context).size.height,
                  width: double.infinity,
                  child: ListView.builder(
                    padding: EdgeInsets.only(top: 10),
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemCount: 4,
                    itemBuilder: (BuildContext context, int index) {
                      return _buildList(context, index);
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }
  
  Widget _buildList(BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(17.0),
        color: Colors.white,
      ),
      width: double.infinity,
      //height: 110,
      margin: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
      //padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        //mainAxisAlignment: MainAxisAlignment.start,

        children: <Widget>[

          Expanded(
            flex: 1,
            child: Container(
              height: 100,
              //height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(17.0), bottomLeft: Radius.circular(17.0)),
                image: DecorationImage(
                  image: NetworkImage('https://img.cybercook.com.br/receitas/152/hamburguer-de-carne-moida-2-623x350.jpeg'),
                  fit: BoxFit.cover
                ),
              ),
              child: null
            )
          ),
          
          Expanded(
            flex: 2,
            child: Column(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  //mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Expanded(child: Padding(
                      padding: const EdgeInsets.fromLTRB(6, 2, 2, 0),
                      child: Text("Sanduba show debmais",),
                    )),
                    Container(
                      width: 90,
                      height: 30,
                      padding: EdgeInsets.only(top: 5),
                      //margin: EdgeInsets.only(top: 0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(topRight: Radius.circular(17), bottomLeft: Radius.circular(17)),
                        color: Colors.red
                      ),
                      child: Text("R\$ 22,00", textAlign: TextAlign.center,),
                    )
                  ],
                ),

                Padding(
                  padding: const EdgeInsets.all(6.0),
                  child: Text("A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica para preencher.",),
                )
              ],
            )
            ),
        ],
      ),

    );
  }

  _clickOpenProduct() {}
}

Answer 1

You can achieve the desired using the widget Intrinsicheight. He will always try to define the best height similar to children, in other words, if one of the children increases in size, the others will follow this same size.

It should be used carefully as it is a costly Widget, and should be avoided if the descending Widgets tree is large. As Docs say:

This class is relatively Expensive, because it adds a speculative pass layout before the final Phase layout. Avoid using it Where possible. In the Worst case, this widget can result in a layout that is O(N²) in the Depth of the Tree.

Meanwhile, here an example use the same for your case, on Dartpad. Note that I have removed a lot of information and simplified it (after all your code uses several classes and information that exist on the default sdk), so it will not be formatted (stylized and cute) as you wish.

But it is already possible to understand that as you increase the size of the text the image will follow the same height.