Home > OS >  Extra "Space" In ListView and Card Flutter
Extra "Space" In ListView and Card Flutter

Time:10-03

I'm having this "extra space" on my first listview item that is a card being encapsulated in a container. How do I remove it?

enter image description here

 Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(15.0),
        height: 300,
        child: Column(children: [
          Row(children: [
            Expanded(
                child: Text("Lowest Fuel Price",
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Theme.orange3,
                        fontSize: 16.0)))
          ]),
          Container(
            height: 250,
            child: Card(
                elevation: 3,
                child: ListView.builder(
                    itemCount: cheapest.length,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      final item = cheapest[index];
                      return Column(
                        children: <Widget>[
                          Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Text(
                                  item.petrolType,
                                  style: TextStyle(
                                      color: Theme.gray1, fontSize: 18),
                                ),
                                Text(
                                  "\$"   item.petrolPrice,
                                  style: TextStyle(
                                      color: Theme.gray1, fontSize: 25),
                                ),
                                Image(
                                    fit: BoxFit.fill,
                                    image: new AssetImage(
                                        'assets/images/fuel_station/'  
                                            item.petrolStation.toLowerCase()  
                                            '.png')),
                              ]),
                          index != cheapest.length - 1
                              ? Divider(
                                  color: Colors.grey,
                                )
                              : Divider(color: Colors.white)
                        ],
                      );
                    })),
          )
        ]));
  }

CodePudding user response:

https://api.flutter.dev/flutter/widgets/ListView-class.html

By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behaviour, override with a zero-padding property.

        Card(
          elevation: 3,
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: ListView.builder(),
          ),
        ),
  • Related