Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Give shadow to listview last item

I am trying to give shadow effect in the end of listview (last widget in the list)
this is my code

return controller.tasksData == null
        ? Center(
            child: SizedBox(
              height: 40,
              width: 40,
              child: CircularProgressIndicator(
                color: AppColor.main_blue,
              ),
            ),
          )
        : controller.PendingTasks.isNotEmpty
            ? Container(
                margin:
                    const EdgeInsets.symmetric(vertical: 20, horizontal: 7),
                child: ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  itemCount: controller.PendingTasks.length,
                  itemBuilder: (context, index) {
                    return Container(
                      margin: const EdgeInsets.only(bottom: 10),
                      child: TaskCard(
                        tasktype: controller.PendingTasks[index]
                                    ['taskType'] !=
                                null
                            ? controller.PendingTasks[index]['taskType']
                                ['name']
                            : '',
                        projectname: controller.PendingTasks[index]
                                    ['feature'] !=
                                null
                            ? controller.PendingTasks[index]['feature']
                                ['project']['name']
                            : '',
                        feature: controller.PendingTasks[index]
                                    ['feature'] !=
                                null
                            ? controller.PendingTasks[index]['feature']
                                ['name']
                            : '',
                        percent: controller.PendingTasks[index]
                                    ['donePercentage'] !=
                                null
                            ? controller.PendingTasks[index]
                                ['donePercentage']
                            : '',
                        hour:
                            '${controller.PendingTasks[index]['duration']}',
                        date: DateFormat('dd MMM').format(DateTime.parse(
                            '${controller.PendingTasks[index]['createdAt']}')),
                        content: controller.PendingTasks[index]['note'] ==
                                null
                            ? ''
                            : '${controller.PendingTasks[index]['note']}',
                      ),
                    );
                  },
                ),
              )
            : Center(
                child: Text(
                  'no data',
                  style: AppFonts.main_grey_MF,
                ),
              );
  },
);

this what i am trying to do i tried this wrap the listview in stack but this code prevent the listview from scrolling

return GetBuilder<HomeController>(
  builder: (controller) {
    return controller.tasksData == null
        ? Center(
            child: SizedBox(
              height: 40,
              width: 40,
              child: CircularProgressIndicator(
                color: AppColor.main_blue,
              ),
            ),
          )
        : controller.PendingTasks.isNotEmpty
            ? Container(
                margin:
                    const EdgeInsets.symmetric(vertical: 20, horizontal: 7),
                child: Stack(
                  children: [
                    ListView.builder(
                      physics: const BouncingScrollPhysics(),
                      itemCount: controller.PendingTasks.length,
                      itemBuilder: (context, index) {
                        return Container(
                          margin: const EdgeInsets.only(bottom: 10),
                          child: TaskCard(
                            tasktype: controller.PendingTasks[index]
                                        ['taskType'] !=
                                    null
                                ? controller.PendingTasks[index]['taskType']
                                    ['name']
                                : '',
                            projectname: controller.PendingTasks[index]
                                        ['feature'] !=
                                    null
                                ? controller.PendingTasks[index]['feature']
                                    ['project']['name']
                                : '',
                            feature: controller.PendingTasks[index]
                                        ['feature'] !=
                                    null
                                ? controller.PendingTasks[index]['feature']
                                    ['name']
                                : '',
                            percent: controller.PendingTasks[index]
                                        ['donePercentage'] !=
                                    null
                                ? controller.PendingTasks[index]
                                    ['donePercentage']
                                : '',
                            hour:
                                '${controller.PendingTasks[index]['duration']}',
                            date: DateFormat('dd MMM').format(DateTime.parse(
                                '${controller.PendingTasks[index]['createdAt']}')),
                            content: controller.PendingTasks[index]['note'] ==
                                    null
                                ? ''
                                : '${controller.PendingTasks[index]['note']}',
                          ),
                        );
                      },
                    ),
                    Container(
                      height: double.infinity,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,

                          colors: [
                            Colors.transparent,
                            Colors.transparent,
                            Colors.black12
                          ]
                        )
                      ),
                    )
                  ],
                ),
              )
            : Center(
                child: Text(
                  'no data',
                  style: AppFonts.main_grey_MF,
                ),
              );
  },
);

}
}

i am a little confuse how can i place the container above the listview and yet let it scroll properly.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this by using scroll shadow package

    ScrollShadow(
            color: Color.fromARGB(255, 58, 58, 58),
            size: 100,
            duration: Duration(hours: 10000),
            child: Container(
              margin:
                  const EdgeInsets.symmetric(vertical: 20, horizontal: 7),
              child: ListView.builder()

  2. 0

    Get index of your last item of listview

    final int lastItemIndex=   
controller.pendingTasks.lenght;

    Then on the itemBuilder
    Write

    if index==lastItemIndex? Container(
//Add decoration and shadow
): Container(
//Normal container
),

    Let me know if you get any issue

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search