简体   繁体   中英

In Flutter/Dart : Display text in AppBar over two lines?

I have created an appBar: it is made up of a row: the row contains three elements: an image / a textwidget / another image.

Here is the code:

appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                child: BarIcon(
                  image: 'icons/back.png',
                  width: 55.0,
                  height: 75.0,
                  onTap: () => Navigator.pop(context),
                ),
              ),
            ),
            Expanded(
              flex: 5,
              child: Container(
                child: Text(
                  widget.thema.toUpperCase(),
                  style: TextStyle(
                    fontSize: 25.0,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                child: Image.asset(
                  widget.image,
                  height: 55.0,
                  width: 55.0,
                ),
              ),
            ),
          ],
        ),

The images display fine, and the text too as long as it is not too long. Then, instead of displaying text over two lines, it adds "..." and cuts the text.

Is there a way to display it over two lines when the title is too long? The text is passed through "widget.thema", so impossible to know the length of the title.

appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                child: BarIcon(
                  image: 'icons/back.png',
                  width: 55.0,
                  height: 75.0,
                  onTap: () => Navigator.pop(context),
                ),
              ),
            ),
            Expanded(
              flex: 5,
              child: Container(
                child: Text(
                  widget.thema.toUpperCase(),
                  style: TextStyle(
                    fontSize: 25.0,
                  ),
                  maxLines: 2,   // TRY THIS
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                child: Image.asset(
                  widget.image,
                  height: 55.0,
                  width: 55.0,
                ),
              ),
            ),
          ],
        ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM