androidiosflutterexpanded

Listview.builder -> Height of Container is stretching in Flutter, even if I put smaller value?


I am using Listview.builder with expanded as its parent due to column, but I am getting empty space at the bottom of this Notice Board widget.

Click to view Image

I had used every type of method to prevent this space but fail to get the desired results.

Suggestions will be appreciated.

Here is the code that I am using:

Expanded(
          child: StreamBuilder<List<NoticeBoardModel>>(
              stream: FireBaseNoticeBoardService().getAllNotice(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                } else {
                  if (snapshot.data?.isNotEmpty == true) {
                    return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data?.length,
                      itemBuilder: (context,index) {
                        return Padding(
                          padding: const EdgeInsets.only(left: 8.0,right: 8.0),
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Container(
                              height: 150,
                              width: 150,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8),
                                  color: Color(int.parse(snapshot.data![index].noticeColor ?? AppColors.noticeModelColorPink.value.toString(),radix: 16))
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(top: 8,left: 8, right: 8),
                                      child: Text(snapshot.data![index].noticeTitle ?? "No title found for this notice",
                                        style: Theme.of(context).textTheme.headline3?.copyWith(fontWeight: FontWeight.bold),
                                      ),
                                    ),
                                  ),
                                  Expanded(child: Container()),
                                  Padding(
                                    padding: const EdgeInsets.only(bottom: 8,left: 8, right: 8),
                                    child: Text(snapshot.data![index].createdDate !=null ? dateFormatString(snapshot.data![index].createdDate!) : "No Date Found",
                                      style: Theme.of(context).textTheme.headline3?.copyWith(color: AppColors.appBlackColor.withOpacity(0.5),fontWeight: FontWeight.bold),
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },);
                  } else {
                    return const Center(
                      child: Text('No Data Exist'),
                    );
                  }
                }
              }),
        ),

Solution

  • While you are already using fixed height on item Container( height: 150,, you can wrap the ListView with SizedBox and provide it on top [incluidng padding]. No need to have Expanded widget or specially not shrinkWrap:true.

     return SizedBox(
       height: 150+ 0, // 0 padding based on your ui.
       child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: snapshot.data?.length,
        itemBuilder: (context,index) {