I have a single child scroll view consist of column and its children, the children consist of two list view wrapped with flexible.

the main problem is flutter forces me to use shrinkWrap property but it render the whole 6k elements at once! knowing that it shows the perfect result but after a short time and this is main problem, the time of rendering my 6k contacts on the phone.

How can i group two Listview.builder in a singleChild scroll view without getting into lags?

SingleChildScrollView(
                    physics: const BouncingScrollPhysics(),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                          
                           /// first header
                              Container(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 10.h),
                                  height: 25.h,
                                  width: displayWidth(context),
                                  color: PawColors().darkGreenColor,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: MediumSemiText(
                                      text:
                                          'friends (${calls.pawFriends.length})',
                                    ),
                                  )),


                        ///first list

                              Flexible(
                                child: ListView.separated(
                                    shrinkWrap: true,
                                    physics:
                                        const NeverScrollableScrollPhysics(),
                                    itemBuilder: (context, index) =>
                                        ListTile(
                                            title: SmallSemiText(
                                          colors:
                                              PawColors().darkGreenColor,
                                          text: calls.pawFriends[index]
                                              ['Name'],
                                        )),
                                    separatorBuilder: (context, index) =>
                                        Divider(
                                            color: PawColors().sawadColor,
                                            height: 5.h),
                                    itemCount: calls.pawFriends.length),
                              ),

                             /// second header

                              Container(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 10.h),
                                  height: 25.h,
                                  width: displayWidth(context),
                                  color: PawColors().darkGreenColor,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: MediumSemiText(
                                      text:
                                          'invite (${calls.contacts.length})',
                                    ),
                                  )),

                             /// second list

                              Flexible(
                                child: ListView.separated(
                                  shrinkWrap: true,
                                  physics:
                                      const NeverScrollableScrollPhysics(),
                                  itemCount: calls.contacts.length,
                                  separatorBuilder: (context, index) {
                                    return const Divider();
                                  },
                                  itemBuilder: (context, index) {
                                    return ListTile(
                                      title: SmallSemiText(
                                          text: calls
                                              .contacts[index].displayName,
                                          colors:
                                              PawColors().darkGreenColor),
                                    );
                                  },
                                ),
                              ),
                            ],
                          ),
                        ),

CodePudding user response：

You can use CusomScrollView as said by @David Sedlář. API documentation: https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  List<int> top = <int>[];
  List<int> bottom = <int>[0];

  @override
  Widget build(BuildContext context) {
    const Key centerKey = ValueKey<String>('bottom-sliver-list');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Press on the plus to add items above and below'),
        leading: IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              top.add(-top.length - 1);
              bottom.add(bottom.length);
            });
          },
        ),
      ),
      body: CustomScrollView(
        center: centerKey,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.blue[200   top[index] % 4 * 100],
                  height: 100   top[index] % 4 * 20.0,
                  child: Text('Item: ${top[index]}'),
                );
              },
              childCount: top.length,
            ),
          ),
          SliverList(
            key: centerKey,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.blue[200   bottom[index] % 4 * 100],
                  height: 100   bottom[index] % 4 * 20.0,
                  child: Text('Item: ${bottom[index]}'),
                );
              },
              childCount: bottom.length,
            ),
          ),
        ],
      ),
    );
  }
}