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,
),
),
),
)
]
),
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,
),
),
),
),
),
)
]
),
),