Flutter: combining two widgets

Question

My problem is like that:

  Widget buildBottem(MyCart ordercart)  {
//return buildItemsList(ordercart); // this is a Expanded
//return buildPriceInfo(ordercart); //this is a Row
return Container(
  child: Column(
      children: <Widget>[
        buildItemsList(ordercart), //show items ordered
        Divider(),
        buildPriceInfo(ordercart),
      ]
  )
);

}

In the above code, I can successfully return either buildItemsList(ordercart) or buildPriceInfo(ordercart) from the function with correct results if I uncomment the respective statement. However, if I try to combine both together as a Column, the result is a blank. The function is called within a FutureBuilder:

return Container(
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        alignment: Alignment.center,
        width: double.infinity,
        child: Container(
          width: 90,
          height: 8,
          decoration: ShapeDecoration(
              shape: StadiumBorder(), color: Colors.black26),
        ),
      ),
      buildTitle(ordercart),
      Divider(),
      Container(
          child: FutureBuilder<Widget>(
              future: retrieveItemsFromFirebase(ordercart),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.hasError)
                  return new Text('Error: ${snapshot.error}');
                switch (snapshot.connectionState) {
                  case ConnectionState.waiting:
                    return new  CircularProgressIndicator();
                  default:
                    if (ordercart.cartItems.length <= 0)
                      return noItemWidget();
                    else
                      return buildBottom(ordercart);
                  }
             }
          )
      ),
      SizedBox(height: 8),
    ]
  )    //addToCardButton(ordercart, context),
);

}

This is in a Web-Firebase application so it is difficult to debug because every time I have to modify the index.html so that it can use Firebase.

I am including the screenshots:

With 'return buildItemsList(ordercart);'

With 'return buildPriceInfo(ordercart);'

and the code of the two implementations:

  Widget buildItemsList(MyCart cart) {
return Expanded(
  child: ListView.builder(
    itemCount: cart.cartItems.length,
    physics: BouncingScrollPhysics(),
    itemBuilder: (context, index) {
      return Card(
        child: ListTile(
          leading: CircleAvatar(
              backgroundImage:
                  NetworkImage(cart.cartItems[index].food.image)),
          title: Text('${cart.cartItems[index].food.name}',
              style: subtitleStyle),
          subtitle: Text('\$ ${cart.cartItems[index].food.price}'),
          trailing: Text('x ${cart.cartItems[index].quantity}',
              style: subtitleStyle),
        ),
      );
    },
  ),
);

}

and

  Widget buildPriceInfo(MyCart cart) {
double total = 0;
for (CartItem cartModel in cart.cartItems) {
  total += cartModel.food.price * cartModel.quantity;
}
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text('Total:', style: headerStyle),
    Text('\$ ${total.toStringAsFixed(2)}', style: headerStyle),
  ],
);

}

and the implementation of buildTitle(cart):

  Widget buildTitle(cart) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text('Your Order', style: headerStyle),
  ],
);

}

Answer 1

The reason why the Widgets buildItemsList() and buildPriceInfo() doesn't appear on screen as you expect is because both Widgets doesn't have bounds defined, and therefore could fill the entire screen. What you can do here is set bounds on those Widgets by using either Expanded or Container with defined height.