Flutter - Put the expand arrow at the end of the last line of the text

Question

Basically I want to achieve the similar thing as this post Flutter: How to hide or show more text within certain length. However, I need to replace "show more" with an arrow and the arrow should be at the end of the last line of the collapsed text (not below it). I checked https://pub.dev/packages/expand_widget and https://pub.dev/packages/expandable these two packages, but they didn't seem to satisfy my requirements.

Could anyone help me with it? Thanks!

score 1 · Accepted Answer · answered Aug 18 '20 at 07:22

1

I think it should work for you!

Row(
  children: [
    Expanded(
      child: Text("your text or widget"),
    ),
    Icon(Icons.keyboard_arrow_down)
  ],
);

answered Aug 18 '20 at 07:22

Rohit Soni

1,300
6
12

score 1 · Answer 2 · answered Aug 18 '20 at 07:41

Just have an arrorw_down icon. When clicked change a boolean in setState(). In the widget tree just check if it's true, show something, else don't. Switch between arrow_up/down depending on the boolean.

Expanded(
      flex: 2,
      child: InkWell(
        onTap: () {
          setState(() {
            isBubbleExpanded = !isBubbleExpanded; // should expand?
          });
        },
        child: Padding(
          padding: EdgeInsets.all(3),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment:
                MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Icon(isBubbleExpanded
                        ? Icons.keyboard_arrow_up
                        : Icons.keyboard_arrow_down),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ));
  }

Then somewhere else in the tree:

if (isBubbleExpanded)
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: Padding(
                      padding: EdgeInsets.all(2),
                      child: Center(),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Center(
                      child: IconButton(
                        icon: const Icon(CupertinoIcons.info),
                        onPressed: () {
                          Navigator.of(context).pushNamed(
                            SomeScreen.routeName,
                            arguments: widget.document,
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),

Flutter - Put the expand arrow at the end of the last line of the text

2 Answers2