How to create read more expandable border when overflow exists

Question

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

Does this answer your question? [Flutter: How to hide or show more text within certain length](https://stackoverflow.com/questions/49572747/flutter-how-to-hide-or-show-more-text-within-certain-length) — Black, Feb 02 '20 at 06:53

score 0 · Accepted Answer · answered Feb 02 '20 at 06:36

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

How to create read more expandable border when overflow exists

1 Answers1