Changing SliverAppBar title color in Flutter application
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"), ), ); } }