skip to Main Content

I have a UI like this:
The ListView still appears, but the last element is not visible unless I scroll down and hold it. Why is that? I want the items to be fully visible when I scroll. I use a Stack because the list is overlaid on top of the image, that’s why I did it that way. Help me!
enter image description here

This code:

SafeArea(
                child: Stack(
                  children: [
                    Image.asset(
                      AppImages.backgroundTechnicalSupport,
                      fit: BoxFit.fill,
                    ),
                    Positioned(
                      top: 20,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: PaddingConstants.h20R,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  LocaleKeys.technicalSupport_title.tr(),
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 24.zsp(context),
                                    fontWeight: FontWeight.w600,
                                    color: Colors.white,
                                  ),
                                ),
                                
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Positioned(
                      top: 280.wh,
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadiusConstants.tl15tr15,
                          color: ThemeHelper.backgroundRealm(context),
                        ),
                        padding: PaddingConstants.h20v10R,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            14.wVerticalSpace,
                            Text(
                              LocaleKeys.technicalSupport_supportType.tr(),
                              style: TextStyle(
                                fontSize: 20.zsp(context),
                                fontWeight: FontWeight.w600,
                                color: ThemeHelper.black(context),
                              ),
                            ),
                            16.wVerticalSpace,
                            Container(
                              constraints: BoxConstraints(
                                maxHeight:
                                    MediaQuery.of(context).size.height - 260.wh,
                              ),
                              child: ListView.separated(
                                shrinkWrap: true,
                                itemBuilder: (_, index) {
                                  return Container(
                                    padding: PaddingConstants.h20v10R,
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        color: ThemeHelper
                                            .borderDateMeetingRoom(context),
                                      ),
                                      borderRadius:
                                      BorderRadiusConstants.c15wr,
                                    ),
                                    child: Row(
                                      children: [
                                       
                                        16.wHorizontalSpace,
                                        Expanded(
                                          child: Padding(
                                            padding: PaddingConstants.v20R,
                                            child: Text(
                                              'Cai dat tai khoan',
                                              style: TextStyle(
                                                fontWeight: FontWeight.w600,
                                                fontSize: 18.zsp(context),
                                                color: ThemeHelper
                                                    .primaryBlueColor(
                                                    context),
                                              ),
                                            ),
                                          ),
                                        ),
                                        SvgPicture.asset(
                                          AppImages.arrowRight,
                                          colorFilter:
                                          ThemeHelper.primaryBlueColor(
                                              context)
                                              .toSvgColor,
                                        ),
                                      ],
                                    ),
                                  );
                                },
                                separatorBuilder: (_, __) =>
                                15.wVerticalSpace,
                                itemCount: 6,
                              )
                            
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              )

Im not good in english, sorry for this

2

Answers


  1. Just wrap your ListView with padding, and set according to your need.
    you can also add this padding in your continer directly.

    Stack(
            children: [
              Image.asset(
                AppImages.backgroundTechnicalSupport,
                fit: BoxFit.fill,
              ),
              Positioned(
                top: 20,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: PaddingConstants.h20R,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            LocaleKeys.technicalSupport_title.tr(),
                            maxLines: 2,
                            style: TextStyle(
                              fontSize: 24.zsp(context),
                              fontWeight: FontWeight.w600,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Positioned(
                top: 280.wh,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadiusConstants.tl15tr15,
                    color: ThemeHelper.backgroundRealm(context),
                  ),
                  padding: PaddingConstants.h20v10R,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      14.wVerticalSpace,
                      Text(
                        LocaleKeys.technicalSupport_supportType.tr(),
                        style: TextStyle(
                          fontSize: 20.zsp(context),
                          fontWeight: FontWeight.w600,
                          color: ThemeHelper.black(context),
                        ),
                      ),
                      //16.wVerticalSpace,
                      Container(
                          constraints: BoxConstraints(
                            maxHeight: MediaQuery.of(context).size.height - 260.wh,
                          ),
                          child: Padding(
                            padding: PaddingConstants.h0v16R, // set according your need 
                            child: ListView.separated(
                              shrinkWrap: true,
                              itemBuilder: (_, index) {
                                return Container(
                                  padding: PaddingConstants.h20v10R,
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: ThemeHelper.borderDateMeetingRoom(
                                          context),
                                    ),
                                    borderRadius: BorderRadiusConstants.c15wr,
                                  ),
                                  child: Row(
                                    children: [
                                      16.wHorizontalSpace,
                                      Expanded(
                                        child: Padding(
                                          padding: PaddingConstants.v20R,
                                          child: Text(
                                            'Cai dat tai khoan',
                                            style: TextStyle(
                                              fontWeight: FontWeight.w600,
                                              fontSize: 18.zsp(context),
                                              color: ThemeHelper.primaryBlueColor(
                                                  context),
                                            ),
                                          ),
                                        ),
                                      ),
                                      SvgPicture.asset(
                                        AppImages.arrowRight,
                                        colorFilter:
                                            ThemeHelper.primaryBlueColor(context)
                                                .toSvgColor,
                                      ),
                                    ],
                                  ),
                                );
                              },
                              separatorBuilder: (_, __) => 15.wVerticalSpace,
                              itemCount: 6,
                            ),
                          )),
                    ],
                  ),
                ),
              ),
            ],
          )
    
    Login or Signup to reply.
  2. This is demo code also i am providing dart pad code https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1 so you can checkout if any error or issue in your code then message me if it’s work then up vote.

    import 'package:flutter/material.dart';
        
        void main() {
          runApp(MyApp());
        }
        
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              home: Scaffold(
                body: SafeArea(
                        child: Stack(
                          children: [
        //                     Image.asset(
        //                       AppImages.backgroundTechnicalSupport,
        //                       fit: BoxFit.fill,
        //                     ),
                            Positioned(
                              top: 20,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Padding(
                                    padding:EdgeInsets.only(right: 20),
        //                             padding: PaddingConstants.h20R,
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
        //                                   LocaleKeys.technicalSupport_title.tr(),
                                          "Testing"
        ,                                  maxLines: 2,
                                          style: TextStyle(
                                            fontSize: 24,//.zsp(context),
                                            fontWeight: FontWeight.w600,
                                            color: Colors.white,
                                          ),
                                        ),
                                        
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Positioned.fill(
                              top: 280,
                              child: Container(
                                width: MediaQuery.of(context).size.width,
                                decoration: BoxDecoration(
        //                           borderRadius: BorderRadiusConstants.tl15tr15,
        //                           color: ThemeHelper.backgroundRealm(context),
                                ),
        //                         padding: PaddingConstants.h20v10R,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
        //                             14.wVerticalSpace,
                                    Text(
        //                               LocaleKeys.technicalSupport_supportType.tr(),
                                      "Test",
                                      style: TextStyle(
        //                                 fontSize: 20.zsp(context),
                                        fontWeight: FontWeight.w600,
        //                                 color: ThemeHelper.black(context),
                                      ),
                                    ),
        //                             16.wVerticalSpace,
                                    Expanded(
        //                               constraints: BoxConstraints(
        // //                                 maxHeight:
        // //                                     MediaQuery.of(context).size.height - 260.wh,
        //                               ),
                                      child: ListView.separated(
                                        shrinkWrap: true,
                                        itemBuilder: (_, index) {
                                          return Container(
        //                                     padding: PaddingConstants.h20v10R,
                                            decoration: BoxDecoration(
                                              border: Border.all(
        //                                         color: ThemeHelper
        //                                             .borderDateMeetingRoom(context),
                                              ),
        //                                       borderRadius:
        //                                       BorderRadiusConstants.c15wr,
                                            ),
                                            child: Row(
                                              children: [
                                               
        //                                         16.wHorizontalSpace,
                                                Expanded(
                                                  child: Text(
                                                    'Cai dat tai khoan $index',
                                                    style: TextStyle(
                                                      fontWeight: FontWeight.w600,
                                                      fontSize: 18,//.zsp(context),
        //                                               color: ThemeHelper
        //                                                   .primaryBlueColor(
        //                                                   context),
                                                    ),
                                                  ),
                                                ),
        //                                         SvgPicture.asset(
        //                                           AppImages.arrowRight,
        //                                           colorFilter:
        //                                           ThemeHelper.primaryBlueColor(
        //                                               context)
        //                                               .toSvgColor,
        //                                         ),
                                              ],
                                            ),
                                          );
                                        },
                                        separatorBuilder: (_, __) =>SizedBox(height:15,),
        //                                 15.wVerticalSpace,
                                        itemCount: 60,
                                      )
                                    
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
        )
              );
          }
        }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search