Changing SliverAppBar title color in Flutter application

Question

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

diegoveloper · Accepted Answer · 2018-12-04 23:13:57Z

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"), ), ); } }

On latest flutter versions, ScrollController _scrollController; will generate a function was called on null to fix this issue using ScrollController _scrollController = new ScrollController();

Code on the Rocks · Accepted Answer · 2022-10-21 13:45:28Z

I think an easier way to accomplish this is to use a LayoutBuilder. You can wrap your title Text widget in with a LayoutBuilder and change the text color based on the maxHeight property of the constraints:

SliverAppBar( pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar( title: LayoutBuilder( builder: (context, constraints) { print(constraints); return Text('My title', style: TextStyle( color: constraints.maxHeight > 150 ? Colors.black : Colors.white, ),); } ), background: Image.asset('assets/header.jpeg', fit: BoxFit.cover), ), ),

Collectives™ on Stack Overflow

Changing SliverAppBar title color in Flutter application

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related