Why the Flutter (Dart) code below doesn't display a scroll bar?

Question

We can scroll the text up and down but no scroll bar is shown.

My purpose in showing the scroll bar was to make the user aware that there is more text below.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Scrollable Alert Dialog'),
      content: SingleChildScrollView(
        child: Scrollbar(
          child: Column(
            children: [
              // add your scrollable content here
              // for example:
              for (var i = 1; i <= 20; i++)
                Text('Item $i'),
            ],
          ),
        ),
      ),
      actions: [
        TextButton(
          child: Text('Close'),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ],
    );
  },
);

Snapshot of the resulting AlertDialog

What exactly you are trying to get? can you include an image/gif will be better — Md. Yeasin Sheikh, Feb 24 '23 at 22:33

score 0 · Answer 1 · answered Feb 24 '23 at 22:19

0

Perhaps the 20 items isn't enough to make it scrollable based on your viewport. SingleChildScrollView will be scrollable only when its child size is greater than its view port. Also, you may wrap the scrollable widget with Scrollbar .

content: Scrollbar( // preferable 
  child: SingleChildScrollView(
    child: Column(
      children: [
        // add your scrollable content here
        // for example:
        for (var i = 1; i <= 220; i++) Text('Item $i'), //here 
      ],
    ),
  ),
),

answered Feb 24 '23 at 22:19

Md. Yeasin Sheikh

54,221
7
29
56

20 is enough for most Android emulators. Text items are for example only. I am using long description text in my app and no scroll bar is visible. – Cartolas Portugal Feb 24 '23 at 22:27
what do you get having `Scrollbar` as top widget – Md. Yeasin Sheikh Feb 24 '23 at 22:28
My purpose is that a vertical scroll bar becomes visible so user can perceive there is more text to read. – Cartolas Portugal Feb 24 '23 at 22:30
The AlertDialog content is wrapped inside a SingleChildScrollView and a Scrollbar widget. The Column widget inside the Scrollbar widget contains the scrollable content. – Cartolas Portugal Feb 24 '23 at 22:35

score 0 · Answer 2 · answered Feb 25 '23 at 00:06

This version worked! Thanks to Yeasin Sheikh.

Widget build(BuildContext context) {
  return AlertDialog(
  title: Text('Scrollable Alert Dialog'),
  content: Scrollbar(
  child: SingleChildScrollView(
    child: Column(
        children: [
          // add your scrollable content here
          // for example:
          for (var i = 1; i <= 20; i++)
            Text('Item $i'),
        ],
      ),
    ),
  ),
  actions: [
    TextButton(
      child: Text('Close'),
      onPressed: () => Navigator.of(context).pop(),
    ),
  ],
  );
}

Why the Flutter (Dart) code below doesn't display a scroll bar?

2 Answers2