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()],
),
),
We have set the MyApp class to be a stateless widget. Then with the Widget build(BuildContext context) we have started describing the UI of the app. Our MaterialApp starts with the Scaffold widget. Then in the CustomScrollView widget, we have slivers property that takes a list of widgets and makes them scrollable.
flexibleSpace field, a flexible space bar expands and contracts as the app scrolls so that the AppBar reaches from the top of the app to the top of the scrolling contents of the app.
Flutter – Center Align Application Bar Title To center align text of App Bar title, use Scaffold and in appBar, set the centerTitle property to true. Following is a quick code snippet to align title at the center of application bar.
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"),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With