How to change the alignment of the title in the SliverAppBar
when the app bar is expanded? I want to make the title's alignment to the left of the bottom when the app bar is expanded and change it to center when the app bar is collapsed. I tried LayoutBuilder
, but I don't know how to check if the app bar is expanded or not.
Asked
Active
Viewed 450 times
1

Md. Yeasin Sheikh
- 54,221
- 7
- 29
- 56

Naduel
- 63
- 3
-
1in more complex cases use `SliverPersitentHeader` – pskink Aug 07 '22 at 11:53
1 Answers
1
You can use this as pskink menthioned
class AppSliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
height: maxExtent,
color: Colors.deepPurple,
child: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Align(
alignment: Alignment.lerp(const Alignment(-.95, 0),
const Alignment(0, 0), shrinkOffset / maxExtent)!,
child: Text("Title"),
),
],
),
),
);
}
@override
double get maxExtent => 200;
@override
double get minExtent => kToolbarHeight;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
false;
}

Md. Yeasin Sheikh
- 54,221
- 7
- 29
- 56
-
1btw instead of computing the `alignment:` by yourself it's easier to use `Alignment.lerp` method – pskink Aug 07 '22 at 12:34
-
-
-
Thank you for your answer with the code. But I think It is the opposite I want the title to be the center when the app bar is collapsed. – Naduel Aug 07 '22 at 12:48
-
-
-
1"But I think It is the opposite" - that's why `lerp` is better - the only change is to swap 2 alignments :-) btw `lerp` is implemented in flutter by lots of classes – pskink Aug 07 '22 at 13:27