Search code examples
flutterdartpull-to-refresh

Flutter dart - ListView behind fixed top containers

Hi I have a problem when using pull_to_refresh package, initial loaded content is behind two top fixed containers and I dont understand behaviour of this. When I used normal RefreshIndicator, everything goes as expected. I tried to set fixed height of containers, put both containers in Column, setting Shrinkwrap false on ListView but none of those help

enter image description here

Code below

Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            width: 50,
            child: Column(children: [
              Container(
                child: Container(
                  margin: const EdgeInsets.only(top: 10.0),
                  child: Text(
                    AppLocalizations.of(context).translate(recordType + 'Records'),
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontStyle: FontStyle.normal,
                      color: Colors.white,
                      fontSize: 30.0,
                      shadows: [
                        Shadow(
                          blurRadius: 10.0,
                          color: Colors.black,
                          offset: Offset(3.0, 3.0),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                child: Container(
                  margin: const EdgeInsets.only(top: 5.0),
                  child: Text(
                    args['horseName'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontStyle: FontStyle.italic,
                      color: Colors.white,
                      fontSize: 28.0,
                      shadows: [
                        Shadow(
                          blurRadius: 10.0,
                          color: Colors.black,
                          offset: Offset(3.0, 3.0),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ]),
          ),
          Expanded(
              child: SmartRefresher(
            enablePullDown: true,
            enablePullUp: true,
            header: WaterDropHeader(
                complete: Text(AppLocalizations.of(context).translate('refreshDone'),
                    style: TextStyle(color: Colors.white))),
            footer: CustomFooter(
              builder: (BuildContext context, LoadStatus mode) {
                Widget body;
                if (noMoreData) {
                  mode = LoadStatus.noMore;
                }
                if (mode == LoadStatus.idle) {
                  body = Text(AppLocalizations.of(context).translate('pullToLoadMore'),
                      style: TextStyle(color: Colors.white));
                } else if (mode == LoadStatus.loading) {
                  body = RefreshProgressIndicator();
                } else if (mode == LoadStatus.failed) {
                  body = Text(AppLocalizations.of(context).translate('loadFailedTryAgain'),
                      style: TextStyle(color: Colors.white));
                } else {
                  body = Text(AppLocalizations.of(context).translate('noMoreData'),
                      style: TextStyle(color: Colors.white));
                }
                return Container(
                  height: 55.0,
                  child: Center(child: body),
                );
              },
            ),
            controller: _refreshController,
            onRefresh: refreshRecords,
            onLoading: fetchRecordByDateDesc,
            child: ListView.builder(
                      return Column(children: <Widget>[
                        Card(
                          child: ListTile(
Solution

  • Solved with this property:

    ListView.builder(

    physics: AlwaysScrollableScrollPhysics(),

    shrinkWrap: true,

    primary: false,

    itemCount: allRecordsChronologically?.length ?? 0,

    Explanation, why primary: false ? - its a ListView.Builder within column, column is a primary scroll, Listview is within column but must be detached from column (cannot start where the actual column starts, because it has two containers above), and because containers are fixed on top it must be scrollable from the parent widget - which is Expanded