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