flutterflutter-layoutexpandable

How to create read more expandable border when overflow exists


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

Solution

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