Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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) {
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading