Title not displaying correctly on flexibleSpaceBar - flutter

Question

I'm trying to show the title but as you can see, it does not do it correctly.
I tried to put softWrap to true but it is still the same.
The code is from flutter contacts_demo gallery
flexibleSpace: FlexibleSpaceBar(
title: const Text('Fantastic Beasts And Where To Find Them'),
background: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'people/ali_landscape.png',
package: 'flutter_gallery_assets',
fit: BoxFit.cover,
height: _appBarHeight,
),
// This gradient ensures that the toolbar icons are distinct
// against the background image.
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(0.0, -1.0),
end: Alignment(0.0, -0.4),
colors: <Color>[Color(0x60000000), Color(0x00000000)],
),
),
),
],
),
),

Answer 1

You can use a ConstrainedBox along with MediaQuery.of(context).size.width
final mediaQuery = MediaQuery.of(context);
final availableWidth = mediaQuery.size.width - 160;
along with
title: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: availableWidth,
),
child: const Text('Fantastic Beasts And Where To Find Them'),
),

Answer 2

I dug into a FlexibleSpaceBar sources and at least now I understand what happens. Turns out that in an expanded state title is scaled up to be 1.5 of its size, so naturally it will overflow offscreen. As user scrolls up, title is scaled down towards its source size of 1.0. At this size it will sit in the top toolbar.
Maybe this information will help someone to base their workarounds on until this is fixed.
I wondered why my hack of wrapping title in ConstraintedBox with maxWidth: MediaQuery.of(context).size.width didn't work. Now I know: I must divide this maxWidth by 1.5.
See also this bug on the Flutter github issue tracker.

Answer 3

The title length in combination with the font size you've set have no way to be displayed on a single line on smaller devices, for obvious reasons.
You may want to play with MediaQuery.of(context).size.width to get the device width and set the header text fontSize accordingly as a fraction of that. Try in the emulator to see which works best for your text length.
const Text(
'Fantastic Beasts And Where To Find Them',
style: TextStyle(fontSize: MediaQuery.of(context).size.width/ SOME_NUMBER),
),
Or just hardcode some font sizes based on some width intervals:
int _getFontSize(BuildContext context) {
int width = MediaQuery.of(context).size.width;
if (width < 300) {
return 10;
} else if (width < 600) {
return 13;
// etc ...
} else {
return 18;
}
}
...
const Text(
'Fantastic Beasts And Where To Find Them',
style: _getFontSize(context),
),

Answer 4

Thanks to dimsuz's answer it is possible to eliminate the upscaling of text in a FlexibleSpaceBar:
SliverAppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.save),
onPressed: () {},
),
],
floating: true,
pinned: false,
snap: false,
flexibleSpace: FlexibleSpaceBar(
title: Text(title, style: TextStyle(fontSize: 20.0 / 1.5)),
centerTitle: false,
background: Container(
color: Theme.of(context).primaryColor,
),
),
expandedHeight: 120,
),
The 20.0 in fontSize I took from here.