I have a container that contains some text. The container is restricted to being half the size of screen. Sometimes there's a lot of and this causes the text to overflow. In the case of an overflow, I'd like the container to be expandable. What is the best way to create an expandable container on the case of an overflow?
The code is as below:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Document Overview')),
body: Container(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: 100,
maxHeight: MediaQuery.of(context).size.height / 2,
),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.black)),
),
child: Column(
children: [
Expanded(
child: Column(
children: [
Text('Some text', style: TextStyle(fontSize: 24)),
SizedBox(height: 16),
Text(
'Some more text',
style: TextStyle(fontSize: 16),
overflow: TextOverflow.fade,
)
],
),
)
],
),
),
);
}
Set minHeight: MediaQuery.of(context).size.height / 2
and remove maxHeight: ...
.
Set mainAxisSize: MainAxisSize.min
in both Column
.
Use Flexible
instead of Expanded
.
This may help,
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Document Overview')),
body: Container(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height / 2,
),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.black)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Some text', style: TextStyle(fontSize: 24)),
SizedBox(height: 16),
Text(
'${List.generate(70, (_) => "Some more text ").join()}',
style: TextStyle(fontSize: 16),
overflow: TextOverflow.fade,
)
],
),
)
],
),
),
);
}