Title not displaying correctly on flexibleSpaceBar

Question

Title not displaying correctly on flexibleSpaceBar

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)],
                    ),
                  ),
                ),
              ],
            ),
          ),

flutter

flutter-layout

flutter-sliver

asked on Stack Overflow Nov 11, 2018 by

Guillaume

4 Answers

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'),
),

answered on Stack Overflow Nov 11, 2018 by

Ringil • edited Nov 12, 2018 by

shaddy

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),
),

answered on Stack Overflow Nov 11, 2018 by

shaddy

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.

answered on Stack Overflow Aug 16, 2019 by

dimsuz

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.

answered on Stack Overflow Nov 29, 2019 by

badelectron77

User contributions licensed under CC BY-SA 3.0