Left aligned title for SlicerAppBar and FlexibleSpace

[balazsgerlei]

Hi!

I'm trying to implement a "Collapsing Toolbar", or the "Flexible space with image" scrolling technique from the Material Design spec, but I don't have a back button or navigation drawer. So I would like the title to be near the left edge, without any left padding/space. When I use the SliverAppBar and FlexibleSpace I can only get it to display the title with a considerable left padding, which when collapsed gives space to a back button or navigation drawer (hamburger) icon. This is not the behaviour I want, I would like to do something similar to the Android Contacts app:

Is this possible (without implementing my new SicerAppBar and FlexibleSpace class from scratch), and if so, how to do it?

[Hixie]

cc @HansMuller

[hereisderek]

this is brought up a year ago, and I'd still very much like to see this

[DengKangKang]

Any solution？

[crushman1]

In FlexibleSpaceBar set titlePadding: EdgeInsets.all(0.0),

[hardypatel30]

@crushman1 this solution would overlap title and left icon in the appbar. We need to find another solution for the same.

I asked question in s.o also .
https://stackoverflow.com/questions/59243525/sliver-appbar-collapsing-toolbar-animate-title-from-left-to-center-in-flutter

[hardypatel30]

@Unfreeze-kk , @balazsgerlei Found the solution on my own and added answer there as well.

https://stackoverflow.com/questions/59243525/sliver-appbar-collapsing-toolbar-animate-title-from-left-to-center-in-flutter/59434248#59434248

Check it.

[xJon]

@crushman1's answer actually fits the request of @balazsgerlei, but a more flexible option is possible with a scroll controller:

https://stackoverflow.com/a/62137478/7885980

[lucasjinreal]

@Hixie @xJon Any standard solution to get the exactly same effect?

[xJon]

@Hixie @xJon Any standard solution to get the exactly same effect?

See my answer over https://stackoverflow.com/a/62137478

[lucasjinreal]

@xJon I tried your anwser, it's nto work like this, not smooth..

[prazedotid]

@Hixie @xJon Any standard solution to get the exactly same effect?

See my answer over https://stackoverflow.com/a/62137478

Unfortunately, this answer does not work for SliverAppBar with kExpandedHeight value of less than around 250.

[lucasjinreal]

@prazeblaze Do u have a better solution on this? my kExpandedHeight actually less than 250, (100)

[percula]

@prazeblaze Do u have a better solution on this? my kExpandedHeight actually less than 250, (100)

Checkout my solution at https://stackoverflow.com/a/64583870/6591585. It only rebuilds what is necessary and will work for smaller expanded heights.

[lucasjinreal]

@percula Do u have gif to post?

[percula]

No gif, just copy/paste.

I ended up creating a better solution that utilizes the transformations already happening within the FlexibleSpaceBar. Just provide a titlePaddingTween such as

titlePaddingTween: EdgeInsetsTween(begin: EdgeInsets.only(left: 16.0, bottom: 16), end: EdgeInsets.only(left: 72.0, bottom: 16))

instead of titlePadding.

I also added a foreground parameter that displays above the title and background, but doesn't transform as they do.

[lucasjinreal]

@percula Can u make it a github repo or pub.dev lib for quickly usage?

[DishitaShah]

To left align your SliverAppBar title, just use property "centerTitle" of SliverAppBar

SliverAppBar(
centerTitle: false,
title: Text('Title'),
),

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.