dartflutterflutter-layout

Flutter listview items are going out of view.


My Listview items are going out of the view and showing in ListTile that is below my Listview, I am not getting what I am doing wrong in my code. Please have a look at below images, you can see ending point of list view and in another image my items are going out of this ending point. I am posting my code below, please have a look and help me to resolve this issue.

See Boundry of My Listview

enter image description here

Here is my Listview items are going out of the view. Below is the code:

 class _CartFinalSummaryState extends State<CartFinalSummary> {


  final cartSummary = new StoreConnector<List<CartItem>, List<CartItem>>(
  converter: (store) => store.state,
  builder: (context, list) => new Padding(
  padding: const EdgeInsets.all(8.0),
    child: new Container(
      margin: new EdgeInsets.only(top: 5.0, left: 5.0, right: 5.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
        new Text(
          "Quantity: (${getTotalQuantity(list)})",
          style: new TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.w700
          ),
        ),

        ],
      ),
     ),

    ),);


   final listCartItem = new StoreConnector<List<CartItem>, 
   List<CartItem>>(
   converter: (store) => store.state,
   builder: (context, list) => new Container(
    child: new Flexible(
      child: new Stack(
        children: <Widget>[
          new ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: list ==0 ? null : list.length,
              itemBuilder: (context, index){

                return new Column(
                  children: <Widget>[
                    new ListTile(

                      title: new Text(
                          list[index].product
                              .name.toString(),
                        style: new TextStyle(fontWeight: FontWeight.bold,
                            fontSize: 18.0),),

                      subtitle: new Text(list[index].quantity.toString()
                          + " x " + list[index].product.price.toString()),
                      trailing: new Text("€"+(list[index].product.price *
                          list[index].quantity).toString(),
                          style: new TextStyle(fontWeight: FontWeight.bold,
                              fontSize: 18.0)),
                    ),
                    new Divider(

                    )
                  ],
                );
              }),
        ],
      ),
    ),

  ));
    @override
   Widget build(BuildContext context) {
   return new Scaffold(
   bottomNavigationBar: new GestureDetector(
    onTap: () {
      /*Navigator.push(
          context,
          new MaterialPageRoute(builder: (context) =>
          new SelectTable()));*/
      },
       child:new StoreConnector<List<CartItem>, List<CartItem>>(
         converter: (store) => store.state,
         builder: (context, list) =>  new Container(
         padding: const EdgeInsets.all(10.0),
         color: Colors.green,
         child: new Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new GestureDetector(

              child: new Text("Proceed to Pay ${
                  "( €"+getTotal(list).toStringAsFixed(2)+" )"}", style:
              new TextStyle(
                  color: Colors.white,
                  fontSize: 18.0),),
            )

          ],
        )
    )),
  ),
  appBar: new AppBar(
    iconTheme: new IconThemeData(color: Colors.white),
    title: new Text('Cart Summary', style: new TextStyle(
      color: Colors.white
    ),),
  ),
  body: new Container(
    child: new Column(
      children: <Widget>[
        cartSummary,
        new Divider(
          color: Colors.black,
          height: 3.0,

        ),
        listCartItem,
       new Divider(
         color: Colors.black,
         height: 5.0,
       ),
       new ListTile(
         title: new Text("Table Selected",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
         trailing: new Text("5",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
       ),
        new Divider(
          color: Colors.black,
        ),
        new ListTile(
         title: new Text("Sub Total",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
         trailing: new Text("5",
             style: new TextStyle(fontWeight: FontWeight.bold,
                 fontSize: 18.0)),
          ),
         ],
       ),
     ),
  );
 }
}

Solution

  • I've resolved the issue by replacing this piece of code. I am still not sure what was the problem, I think the ListTiles that I was using were transparent, I've used ListTile as child of Container widget and set the background color of container.

       new Divider(
             color: Colors.black,
             height: 0.1,
           ),
           new Container(
             color: const Color(0xFFD6D6D6),
             child: new ListTileTheme(
    
    
               child: new ListTile(
    
                 onTap: (){
                   Navigator.pushReplacement(
                       context,
                       new MaterialPageRoute(builder: (context) =>
                       new SelectTable()));
                 },
                 title: new Text("Table Selected",
                     style: new TextStyle(fontWeight: FontWeight.bold,
                         fontSize: 17.0)),
                 trailing: new Text(widget.tableNumber.toString(),
                     style: new TextStyle(fontWeight: FontWeight.bold,
                         fontSize: 17.0)),
               ),
             ),
           ),
            new Divider(
              height: 0.1,
              color: Colors.black,
            ),
            new Container(
              color: const Color(0xFFD6D6D6),
              child: new ListTile(
               title: new Text("Grand Total",
                   style: new TextStyle(fontWeight: FontWeight.bold,
                       fontSize: 17.0)),
               trailing: new Text("€"+getTotal(list).toString(),
                   style: new TextStyle(fontWeight: FontWeight.bold,
                       fontSize: 17.0)),
           ),
            ),