Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)],
                    ),
                  ),
                ),
              ],
            ),
          ),
like image 806
Guillaume Avatar asked Dec 17 '22 20:12

Guillaume


1 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'),
),
like image 92
Ringil Avatar answered Feb 13 '23 03:02

Ringil