androidflutterdart

CustomScrollView slivers with contents in SliverFillRemaining not scrolling


I am trying to create a flutter screen using the CustomScrollView and Sliver widgets where the SliverFillRemaining has a Text widget that can scroll down like reading scroll-able text content.

I can achieve this by wrapping the Text within the SingleChildScrollView however i want to have the functionality of a header that can automatically hide using SliverAppBar

How can i achieve the behaviour similar to SingleChildScrollView?

When i add Text widget inside SliverFillRemaining it only scrolls down until the SliverAppBar is hidden and then stops.

var scaffold = Scaffold(
    body: CustomScrollView(
        slivers: <Widget>[
            SliverAppBar(
                pinned: false,
                snap: false,
                floating: true,
                expandedHeight: 40.0,
                flexibleSpace: FlexibleSpaceBar(
                    title: Text(widget.path.title),
                ),
            ),
            SliverFillRemaining(
                hasScrollBody: true,
                child: Scrollbar(
                    child: Text(
                        data, //this variable has a huge string.
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                            height: 1.5,
                            fontFamily: widget.fontFamily,
                            fontSize: widget.fontSize,
                            fontWeight: (widget.bold)? FontWeight.bold:FontWeight.normal,
                        ),
                    ),
                ),
            )
        ]
    ),

Solution

  • I was able to solve my issues with the following approach.

    Instead of using the SliverFillRemaining widget i could use the SliverToBoxAdapter to achieve what i needed. i then had the Text widget inside that.

    see example below.

         var scaffold = Scaffold(
              body: Scrollbar(
                child: CustomScrollView(controller: _controller, slivers: <Widget>[
                  SliverAppBar(
                    actions: <Widget>[
                      IconButton(
                        icon: Icon(Icons.settings),
                        onPressed: () {
                          setState(() {
                            if (_expandedHeight == 40) {
                            _expandedHeight = 500;
                            _title = AppConstants.EMPTY_STRING;
                            }
                            else {
                            _expandedHeight = 40;
                            _title = widget.path.title;
                            }
                          });
                        },
                      )
                      ],
                    pinned: false,
                    snap: false,
                    floating: true,
                    expandedHeight: _expandedHeight,
                    flexibleSpace: FlexibleSpaceBar(
                      title: Text(_title),
                      background: OptionsPage(),
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Scrollbar(
                      child: Padding(
                        padding: const EdgeInsets.all(AppConstants.READER_PADDING),
                        child: MediaQuery(
                          data: MediaQuery.of(context).copyWith(
                            textScaleFactor: StoreProvider.of<AppState>(context).state.textScaleValue,
                          ),
                          child: Text(
                            data,
                            textAlign: TextAlign.left,
                            style: new TextStyle(
                              height: 1.5,
                              fontFamily: getLanguageMenuItemValueByName(StoreProvider.of<AppState>(context).state.languageName).fontName,
                              fontSize: getLanguageMenuItemValueByName(StoreProvider.of<AppState>(context).state.languageName).fontSize,
                              fontWeight:
                                  (StoreProvider.of<AppState>(context).state.bold) ? FontWeight.bold : FontWeight.normal,
                            ),
                          ),
                        ),
                      ),
                    ),
                  )
                ]
              ),
            ),