Text with undefined length Flutter - firebase

Question

I have these "cards" with a defined height, but the text can be of different lengths. Basically, there is a title and a body, I want the title to be fully displayed (there is a limit of 50 chars) but here is the issue, the body text isn't taking the whole space and I can't manage to get it to work properly.
Here is how it looks
As you can see on the first card the title text is short so there is space for the body text to expand. On the second card, the title text is longer so if I increase the parent's height of the body text, it would overflow and push the button.
Here is the code
Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(
left: 12, top: 8.0, right: 12),
child: Text(document['titre'],
style: TextStyle(
color: Colors.white,
fontSize: 24)),
),
),
Container(
height: 33,
child: Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0),
child: Column(
children: [
Flexible(
child: Text(document['texte'],
overflow:
TextOverflow.ellipsis,
maxLines: 5,
style: TextStyle(
color: Colors.white)),
),
],
),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(
left: 20.0, bottom: 10),
child: Align(
alignment: Alignment.bottomLeft,
child: SizedBox(
height: 30,
width: 120,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Color.fromRGBO(
255, 64, 0, 1.0),
onPrimary: Colors.white,
shape:
const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(
Radius.circular(10.0))),
),
onPressed: () {
var docid = document.id;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Article(id: docid)));
},
child: Text("Lire la suite",
style: TextStyle(
color: Colors.white)),
),
),
),
)
],
)
If I remove the "maxLine" the text is only one line and if I change the container height it works but it pushes the button "Lire la suite" when the text is too long... I'm a bit stuck here

Answer 1

It is not good practice to use fixed sizes in your code so instead try to use MediaQuery of the context which is a very useful feature to avoid pixel overflows and make your UIs look good in different Screen Sizes.
height: MediaQuery.of(context).size.height * 0.9,
width: MediaQuery.of(context).size.width * 0.9,
You can set the a dynamic height and width by multiplying like so
for ex. .9 means 90% of your screen