Search code examples
flutterflutter-layoutflutter-sliver

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

Solution

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