'Flutter hide title of Silver app bar when expanded
I have implemented a silver app bar with background image on my flutter app. i want to make title of the silver app bar to hide when silver app bar on expanded mode. i only want to display the title when it is collapsed how can i achieve this behavior?
SliverAppBar(
expandedHeight: 250.0,
floating: false,
pinned: true,
title: Text("Coporate News"),
elevation: 8,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(""),
background: Stack(
children: [
Container(
height: 400,
child: Image.network(
news['url'],
fit: BoxFit.cover,
),
),
.......
Solution 1:[1]
You have to set the pinned
property to false:
SliverAppBar(
expandedHeight: 250.0,
floating: false,
pinned: false,
title: Text("Coporate News"),
elevation: 8,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(""),
background: Stack(
children: [
Container(
height: 400,
child: Image.network(
news['url'],
fit: BoxFit.cover,
),
),
.......
Solution 2:[2]
import 'package:flutter/material.dart';
class InvisibleExpandedHeader extends StatefulWidget {
final Widget child;
const InvisibleExpandedHeader({
Key? key,
required this.child,
}) : super(key: key);
@override
_InvisibleExpandedHeaderState createState() {
return _InvisibleExpandedHeaderState();
}
}
class _InvisibleExpandedHeaderState extends State<InvisibleExpandedHeader> {
ScrollPosition? _position;
bool? _visible;
@override
void dispose() {
_removeListener();
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_removeListener();
_addListener();
}
void _addListener() {
_position = Scrollable.of(context)?.position;
_position?.addListener(_positionListener);
_positionListener();
}
void _removeListener() {
_position?.removeListener(_positionListener);
}
void _positionListener() {
final FlexibleSpaceBarSettings? settings =
context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
bool visible = settings == null || settings.currentExtent <= settings.minExtent;
if (_visible != visible) {
setState(() {
_visible = visible;
});
}
}
@override
Widget build(BuildContext context) {
return Visibility(
visible: _visible?? false,
child: widget.child,
);
}
}
and Use this InvisibleExpanded Widget inside Sliver AppBar
return SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.all(20),
background: InteractiveViewer(
child: Image.network(examImagePlaceHolder,
fit: BoxFit.cover, width: double.infinity)),
title: InvisibleExpandedHeader(
child: Text(
'Global Iq Test for all students in the world',
style: primaryTitle,
),
),
),
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Bram Dekker |
Solution 2 | Mohammadjan Naser |