Search code examples
flutterflutter-sliversliverappbar

Title Alignment in Sliver SpaceFlexibleBar

Im very desperate. Im new to flutter and following the tutorials in YT. There I came across following problem and wonder how Im the only on.

In the YouTube (https://www.youtube.com/watch?v=YY-_yrZdjGc&list=PLjxrf2q8roU3wk7CDw4RfV3mEwOJbjx1k&index=5) video one gets explained how to use sliver. I great tool for scrolling experiences I guess.

But after following the tutorial and even visiting the solution on flutter.dev/go/sliver-workshop I cant get to allign the title in the center.

Code: Code

Picture: Horizons not alligned in the center

Solution

  • The easiest way to debug such layout behaviour is to make use of the built-in Widget Inspector.

    I have ran the codelab's code in an iOS simulator and enabled the overlay guidelines. You can see in the below screenshot that the title is actually centered. However, there are some padding in the left and bottom.

    You could also try to replace title: const Text('Horizons'), with title: const Placeholder(), which will also show you the layout.

    So the answer to your question is: there is default padding for FlexibleSpaceBar and adding the below line should fix it.

    titlePadding: EdgeInsets.zero,

    demo