CODEWITHSUNDEEP
flutterflutter-layoutflutter-sliver
Guillaume
Guillaume

Reputation: 1537

Title not displaying correctly on flexibleSpaceBar

I'm trying to show the title but as you can see, it does not do it correctly.

enter image description here

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

Upvotes: 5

Views: 5245

Answers (4)

madlick71
madlick71

Reputation: 2436

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.

Upvotes: 0

dimsuz
dimsuz

Reputation: 9207

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.

Upvotes: 6

Ringil
Ringil

Reputation: 6537

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

Upvotes: 6

Sh1d0w
Sh1d0w

Reputation: 9520

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

Upvotes: 1

Related Questions