List view childs get out of container

Viewed 74

I am trying to make a list view only occupy part of the screen, but it keeps growing till the end not respecting the contianer constraints. I tried to use a sizedbox too but it didn' work. List tiles outside the container are shown without any widget inside, but the background is shown anyways

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: pedidos,
        builder: (context, AsyncSnapshot<List<Pedido>> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  height: MediaQuery.of(context).size.height * 0.6,
                  child: ListView.builder(
                      itemCount: snapshot.data!.length,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Hero(
                              tag:
                                  "pedidos_card${snapshot.data![index].idPedido}",
                              child: ListTile(
                                tileColor: Colors.white,
                                leading: Container(
                                  width: 50,
                                  height: 50,
                                  decoration: BoxDecoration(
                                      color: Colors.blue,
                                      shape: BoxShape.circle),
                                  child: Center(
                                    child: Text(
                                        style: Theme.of(context)
                                            .textTheme
                                            .headlineSmall,
                                        "${snapshot.data![index].idPedido}"),
                                  ),
                                ),
                                title: Text(
                                    'Pedido: ${snapshot.data![index].idPedido}'),
                                subtitle: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(height: 10),
                                    Text(
                                        'Estado: ${snapshot.data![index].estadoPedido.last.tipoEstadoPedido.name}'),
                                    SizedBox(height: 10),
                                    Text(
                                        "Cliente: ${snapshot.data![index].cliente.nombre}")
                                  ],
                                ),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                trailing: Checkbox(
                                  value: pedidosSeleccion
                                      .contains(snapshot.data![index]),
                                  onChanged: (bool? value) {
                                    // value = checkboxList[index];
                                    // setState(() {});
                                  },
                                ),
                                onTap: () {
                                  bool isSelected = pedidosSeleccion
                                      .contains(snapshot.data![index]);
                                  if (isSelected) {
                                    pedidosSeleccion
                                        .remove(snapshot.data![index]);
                                  } else {
                                    pedidosSeleccion.add(snapshot.data![index]);
                                  }

                                  setState(() {});
                                },
                              ),
                            ));
                      }),
                ),
                ElevatedButton(
                    onPressed: () {}, child: Text('Ver ultima milla')),
              ],
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        });
  }
}

example

1 Answers

you can use Expanded instead of Sizedbox

eg:-

Column(
    children:[
        Expanded(flex:9,
        child: ListView(
               padding: const EdgeInsets.only(top: 10.0),
               children: snapshot.map((data) => _buildListItem(context, data)).toList(),
               ),
        ),
        Expanded(flex:1,
        child: 
        ElevatedButton(
        // fill in required params
        ),
        )
     ])
Related