superlistapp / super_sliver_list

Drop-in replacement for SliverList and ListView that can handle large amount of items with variable extents and reliably jump / animate to any item.
https://superlistapp.github.io/super_sliver_list/
MIT License
280 stars 15 forks source link

[Bug] Overlay another widget if itemCount has little data #6

Closed chopper985 closed 7 months ago

chopper985 commented 8 months ago

Error image:

https://github.com/superlistapp/super_sliver_list/assets/55568733/7581b903-57c2-456e-aef7-38c4169f6a66

I thank you for your interest in this matter.

knopp commented 8 months ago

Csn you provide code thst can reproduce the issue?

chopper985 commented 8 months ago


class TransactionHistoryB extends StatefulWidget {
  const TransactionHistoryB({
    super.key,
  });

  @override
  State<TransactionHistoryB> createState() => _TransactionHistoryBState();
}

class _TransactionHistoryBState extends State<TransactionHistoryB> {
  final ScrollController _scrollController = ScrollController();
  final RefreshController _refreshScrollController = RefreshController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBarTitleBack(
        context,
        Strings.transHistoryAppbartext.i18n,
      ),
      body: Column(
        children: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 12.sp),
            padding: EdgeInsets.all(1.5.sp),
            height: 32.sp,
            width: 100.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.sp),
              color: Colors.red,
            ),
          ),
          SizedBox(height: 10.sp),
          Expanded(
            child: ColoredBox(
              color: Theme.of(context).colorScheme.background,
              child: SmartRefresher(
                physics: const BouncingScrollPhysics(),
                onRefresh: () async {},
                onLoading: () {},
                controller: _refreshScrollController,
                child: CustomScrollView(
                  physics: const BouncingScrollPhysics(),
                  controller: _scrollController,
                  slivers: [
                    SliverPadding(
                      padding: EdgeInsets.zero,
                      sliver: SuperSliverList(
                        delegate: SliverChildBuilderDelegate(
                          (context, index) {
                            return Container(
                              color: Theme.of(context).scaffoldBackgroundColor,
                              padding: EdgeInsets.symmetric(
                                vertical: 14.sp,
                                horizontal: 16.sp,
                              ),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Image.asset(
                                    Assets.icons.icPaymentSuccess.path,
                                    width: 30.sp,
                                  ),
                                  SizedBox(width: 10.sp),
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Row(
                                          children: [
                                            Flexible(
                                              child: Text(
                                                'Hello, transaction hihi',
                                                overflow: TextOverflow.ellipsis,
                                                maxLines: 1,
                                                style: TextStyle(
                                                  fontSize: 11.sp,
                                                  color: Theme.of(context)
                                                      .textTheme
                                                      .bodyMedium!
                                                      .color,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        Padding(
                                          padding: EdgeInsets.symmetric(
                                            vertical: 4.sp,
                                          ),
                                          child: Text(
                                            "20/12/2023",
                                            style: TextStyle(
                                              fontSize: 10.sp,
                                              color: Theme.of(context)
                                                  .textTheme
                                                  .bodyMedium!
                                                  .color,
                                            ),
                                          ),
                                        ),
                                        Text(
                                          r"2000$",
                                          style: TextStyle(
                                            fontSize: 11.sp,
                                            fontWeight: FontWeight.w700,
                                            color: Colors.green,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                          childCount: 3,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
chopper985 commented 8 months ago

Little data:

https://github.com/superlistapp/super_sliver_list/assets/55568733/feac7999-ee31-42f7-ab24-579bde0c7151

Lots of data:

https://github.com/superlistapp/super_sliver_list/assets/55568733/7a4ae5b0-7788-416b-b4ff-bc0ad5e93523

knopp commented 8 months ago

Can you provide full example, including imports and pubspec.yaml?

chopper985 commented 8 months ago

Sorry, I can not send a full example but I solved it by setting hasVisualOverflow = true Thanks for your support.

knopp commented 7 months ago

This should be fixed by https://github.com/superlistapp/super_sliver_list/pull/7.