I'm using a SliverAppBar including a background Image and Title. Title text is white and I need to change the color to black on the AppBar is 'reduced' (since tabbar is white as well).
How to do that ?
NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {;
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
backgroundColor: Colors.white,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(_event.name,
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: CachedNetworkImage(
imageUrl: _event?.imageMediumUrl ??
'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png',
fit: BoxFit.cover,
)),
),
SliverPersistentHeader(
delegate: _SliverAppBarDelegate(
TabBar(
labelColor: Colors.white,
indicatorColor: Colors.red,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(icon: Icon(Icons.info), text: "Info"),
Tab(icon: Icon(Icons.people), text: "Courses"),
],
),
),
pinned: true,
),
];
},
body: TabBarView(
children: <Widget>[_buildInfo(), _buildTrials()],
),
),
You can do it using a ScrollController
, listen to the scroll and compare the offset with the default size of the Toolbar.
I made an example for you:
class TestingNewState extends State<TestingNew> {
ScrollController _scrollController;
bool lastStatus = true;
_scrollListener() {
if (isShrink != lastStatus) {
setState(() {
lastStatus = isShrink;
});
}
}
bool get isShrink {
return _scrollController.hasClients &&
_scrollController.offset > (200 - kToolbarHeight);
}
@override
void initState() {
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
super.initState();
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
super.dispose();
}
@override
Widget build(BuildContext context) {
return NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
backgroundColor: Colors.white,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("text sample",
style: TextStyle(
color: isShrink ? Colors.black : Colors.white,
fontSize: 16.0,
)),
background: CachedNetworkImage(
imageUrl:
'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png',
fit: BoxFit.cover,
)),
),
];
},
body: Center(
child: Text("hello world"),
),
);
}
}