Making a scrollable flat button in Flutter application

Question

I'm trying to embed a flat button with a variable amount of text within a scroll view, so that the user can scroll the text but also tap it in order to perform an action. I tried doing this with a flat button embedded in a ConstrainedBox, which itself is embedded in a SingleChildScrollView.

I've tried embedding the FlatButton in a SingleChildScrollView as below. Earlier, I tried wrapping the text in an expanded widget with a SingleChildScrollView ancestor but that caused runtime errors because the requirements of the scroll view and the expanded view conflict (as far as I understand).

Widget contentScreen() {
    return SingleChildScrollView(
        child: ConstrainedBox(
            constraints: BoxConstraints(),
            child: FlatButton(
                onPressed: () {
                  _toggleContent();
                },
                child:
                    Column(children: <Widget>[
                      Container(
                    child: Text(
                      "Lorem Ipsum....",
                      style: TextStyle(color: Colors.white, fontSize: 20))),
                ]
                    )
            )
        )
    );
  }

The text just doesn't scroll. Instead it overflows and shows the diagonal yellow bars. I don't have a list of exactly what I've tried, but where I'm at right now is that I'm using the above code but there is no scrolling behavior as expected. :\

I tried this: How to make the Scrollable text in flutter?

This: Make scrollable Text inside container in Flutter

And this: how to make text or richtext scrollable in flutter?

Is there something about the FlatButton's behavior that just precludes scrolling? If so, how can I work around that to still get the two behaviors (ability to both scroll and tap to perform action) that I want?

why to use flatbutton? can use inkwell or gesture detector instead — Murat Aslan, Jul 19 '19 at 10:29
Changing FlatButton to InkWell (and onPressed to onTap) doesn't fix the problem unfortunately — A. Hunter, Jul 19 '19 at 12:53

score 0 · Answer 1 · answered Jul 19 '19 at 13:47

0

Have you tried this? Why do you need Expanded widget?

Container(
  height: 20.0,
  child: FlatButton(
      onPressed: () {},
      child: SingleChildScrollView(
       child: Text('Lorem ipsum'),
      ),
  ),
),

Gesture Detector should also work well.

answered Jul 19 '19 at 13:47

Sofiia Shvaiko

1
3

I used Expanded because it was recommended in one of the other SO threads I found about this topic. I'll try this! – A. Hunter Jul 22 '19 at 12:11

score -1 · Answer 2 · edited May 08 '21 at 09:24

-1

Container(
  height: 20.0,
  child: FlatButton(
      onPressed: () {},
      child: SingleChildScrollView(
       child: Text('Lorem ipsum'),
      ),
  ),
),

edited May 08 '21 at 09:24

Wai Ha Lee

7,664
52
54
80

answered May 07 '21 at 23:53

A.W.PRAGESH. Dushan

1

1

Welcome to Stack Overflow. While this code may solve the question, [including an explanation](https://meta.stackoverflow.com/questions/392712/explaining-entirely-code-based-answers) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – Pawara Siriwardhane May 08 '21 at 03:24

Making a scrollable flat button in Flutter application

2 Answers2