Flutter- Listview during scroll goes behind above widget

user_13973724 0
Viewed 488

Refer this video

Here is my code it simple use of listView builder.After scroll list view is goes unexpectedly goes behind above row widget.Any suggestion to which widget should use instead listView builder?

 Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                Row(
                  children: [
                    Text(
                      'Sorted By',
                      style: Theme.of(context).textTheme.caption?.copyWith(
                          color: AppColors.labelText, fontSize: 14),
                    ).paddingForOnly(right: 20),
                    sortButtons()
                  ],
                ),
                Text(
                  'List of Report',
                  style: Theme.of(context)
                      .textTheme
                      .bodyText1
                      ?.copyWith(color: AppColors.profileLabel),
                ).paddingForOnly(top: 30, bottom: 10),
                Flexible(
                    child: 
                    ListView.builder(
                        itemBuilder: (context, index) => ListTile(
                              onTap: () {
                                Application.customNavigation(
                                    context: context,
                                    path: ReportDetailScreen.route);
                              },
                              tileColor: AppColors.listTileBG,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15)),
                              leading: Image.asset(AssetsPath.calendarSymbol),
                              title: Text(
                                'Monday, Aug 05',
                                style: textTheme.bodyText2?.copyWith(
                                    color: Colors.black,
                                    fontWeight: FontWeight.w500),
                              ),
                            ).paddingWithSymmetry(vertical: 4))),
                //Expanded(child: reportList(context))
              ],
            ),

Thank YOU

flutter-layout flutter user-interface
1 Answers

This behavior is normal, since the only Widget that is scrollable is your ListView.builder. To make everything else also scrollable, you can use SingleChildScrollView. Wrap it around your Column, which makes the whole Column scrollable. Important to mention is that you have to set shrinkWrap property of ListView.builder() to true, otherwise you'll get an error.

SingleChildScrollView(
  child: Column(
    children: [
      ...,
      ListView.builder(
        shrinkWrap: true,
        ...
      ),
    ],
  )
);
user_99363840
Related