ListView.Builder can't scroll to max extent-CodePudding

I'm trying to create a contact book page that will load recent contact and all of my contact list, I managed to get the data and build it into the widget.

Design that I want to achieve for the screen body are:

a search widget which always stay on top even when the contact book can be scrolled.
List of the contact that can be scrolled

The problem is when there are a lot of contact (let say 20 contacts). If the screen size is small, it can only scroll until 7-8 contacts, but I know there's more to it. But I guess my ListView.Builder won't let me scroll down anymore. Like it's constrained by some properties but I don't know what is the reason

Can anyone please tell me the problem and how to fix this ?

Here's my code:

      /// BODY
      body: WillPopScope(
        onWillPop: () {
          print('hello');
        },
        child: ListView(
          physics: BouncingScrollPhysics(),
          shrinkWrap: true,
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 20),
              height: MediaQuery.of(context).size.height,
              child: NestedScrollView(
                controller: _scrollController,
                headerSliverBuilder: (context, isScrolled) {
                  return [
                    SliverPersistentHeader(
                      pinned: true,
                      floating: false,
                      delegate: ChooseUsersHeaderDelegate(
                        widgetList: Container(
                          color: Colors.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [

                              /// Build Search Box Function
                              buildSearch(),
                            ],
                          ),
                        ),
                        minHeight: selectedContactId.isNotEmpty ? 135 : 60,
                        maxHeight: selectedContactId.isNotEmpty ? 135 : 60,
                        parentContext: context,
                      ),
                    ),
                  ];
                },
                body: Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      /// All Contacts Subtitle
                      Text(
                        'allContacts',
                        style: GoogleFonts.montserrat(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                          color: primaryColor,
                          fontStyle: FontStyle.normal,
                        ),
                      ).tr(),

                      /// All Contacts
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          isLoading
                              ? ReusableLoadingContact()
                              : NotificationListener<
                                      OverscrollIndicatorNotification>(
                                  onNotification: (overScroll) {
                                    overScroll.disallowIndicator();
                                    return true;
                                  },
                                  /// Call function to return the widget for building contact list
                                  child: buildWidget(context, 'contacts')),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),

Here's the code for building the contact List:

  Widget build(BuildContext context) {
    return contact.isEmpty
        ? Text('')
        : ListView.builder(
      /// Force to build only 2 items if recent, otherwise build all
      itemCount: status == 'recent' ? contact.length > 2 ? 2 : contact.length : contact.length,
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        /// Return the widget of each contact
      },
    );
  }

CodePudding user response：

if you want to make your search bar stay on top here a very simple way

body : Column(
 children:[
    // this part will stay on top
    Container() // your widget search bar

    // listview widget will rendered after the Container
    Expanded(
      child: Listview.builder(
        // this part will be scrollable
       // return the widget contact
      )
    )
  ]
....

CodePudding user response：

To attain this , use Container and Expanded as child widgets for Column

Format:

body : Column(
 children:[
    Container(
      child: // Your search bar goes here
      ),

    Expanded(
      child: // Your list view goes here
      )
    )
  ]