Expandable text widget in Flutter

Question

In flutter, how do we create a text widget, which will show just one line of a text , but it will expand to show all the contents of the text when clicked?

Answer 1

Welcome to the flutter world.

The widget you are looking for is ExpansionTile:

A simple code example:

ExpansionTile(
  title: Text('My Expansion Tile'),
  children: <Widget>[
    Text('Item 1'), 
    Text('Item 2')],
),

Personally though, I use the Expandable package, which is an expansion tile on steroids. If offers improved control and customisability. Check out their docs that have some really good examples.

Answer 2

Just try your code with Flexible class.

You can find the reference here, here. Or, read the docs here.

Hope it will help.

Answer 3

If i understand well you want only a part of the text to be show initially and when tapped on it expands or contracts back. Try this custom stateful widget i implemented bellow..hope it helps

 class ExpandableText extends StatefulWidget {
      ExpandableText({this.text = ""});
      //text is the total text of our expandable widget
      final String text;
      @override
      _ExpandableTextState createState() => _ExpandableTextState();
    }
    
    class _ExpandableTextState extends State<ExpandableText> {
      String textToDisplay;
      @override
      void initState() {
        //if the text has more than a certain number of characters, the text we display will consist of that number of characters;
        //if it's not longer we display all the text
        print(widget.text.length);
     
        //we arbitrarily chose 25 as the length
        textToDisplay =
            widget.text.length > 25 ? widget.text.substring(0,25)+"..." : widget.text;
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return InkWell(
          child: Text(textToDisplay),
          onTap: () {
          
            //if the text is not expanded we show it all
            if (widget.text.length > 25 && textToDisplay.length <= 25) {
              setState(() {
                textToDisplay = widget.text;
              });
            } 
    //else if the text is already expanded we contract it back
    else if (widget.text.length > 25 && textToDisplay.length > 25) {
              setState(() {
                textToDisplay = widget.text.substring(0,25)+"...";
              });
            }
            
          
          },
        );
      }
    }