I have a long text and I need to show the scrollbar by default when the user enters my page.

Currently, the bars not shown until the user click over the text and this, not good behavior because the user could leave the page without notice that there is some unread text.

My code:

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Image.asset(
                "assets/images/logo.png",
                height: 200.0,
              ),
              SizedBox(
                height: 40,
              ),
              Expanded(
                child: Scrollbar(
                  child: SingleChildScrollView(
                    child: Text("Long Text Here ...",
                      textDirection: TextDirection.rtl,
                      style: TextStyle(fontSize: 17.2),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: RaisedButton(
                      child: Text("Continue"),
                      onPressed: () {
                        MaterialPageRoute route = MaterialPageRoute(
                            builder: (BuildContext context) => MainPage());
                        Navigator.of(context).push(route);
                      },
                    ),
                  ),
                  SizedBox(
                    width: 20.0,
                  ),
                  RaisedButton(
                    child: Text("Close"),
                    onPressed: () {
                      exit(0);
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }```


Solution 1: dlohani

Use draggable_scrollbar package. It provides a dragable scrollbar with option to make the scrollbar always visible. For example, you can use the following code

 DraggableScrollbar.arrows(
  alwaysVisibleScrollThumb: true, //use this to make scroll thumb always visible
  labelTextBuilder: (double offset) => Text("${offset ~/ 100}"),
  controller: myScrollController,
  child: ListView.builder(
    controller: myScrollController,
    itemCount: 1000,
    itemExtent: 100.0,
    itemBuilder: (context, index) {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(4.0),
          color: Colors.purple[index % 9 * 100],
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      );
    },
  ),
);


Solution 2: joaomarcos96

As of Flutter version 1.17, on Scrollbar you can set isAlwaysShown to true, but you must set the same controller for your Scrollbar and your SingleChildScrollView (and that applies to any other scrollable Widget as well).

Have in mind that, for the Scrollbar to be visible, there must be enough items to scroll. If there are not, the Scrollbar won't be shown.

Full working example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {  
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Center(
          child: Column(
            children: <Widget>[
              // ...
              Expanded(
                child: Scrollbar(
                  controller: _scrollController, // <---- Here, the controller
                  isAlwaysShown: true, // <---- Required
                  child: SingleChildScrollView(
                    controller: _scrollController, // <---- Same as the Scrollbar controller
                    child: Text(
                      "Long Text Here ...",
                      textDirection: TextDirection.rtl,
                      style: TextStyle(fontSize: 17.2),
                    ),
                  ),
                ),
              ),
              // ...
            ],
          ),
        ),
      ),
    );
  }
}


Solution 3: jayjw

As of v2.9.0-1.0, thumbVisiblity is the proper field to set.

Note you can set this globally for your app (or a certain subtree) using ScrollbarTheme:

    return MaterialApp(
    ...
      theme: ThemeData(
        ...
        scrollbarTheme: ScrollbarThemeData(
          thumbVisibility: MaterialStateProperty.all<bool>(true),
        )
      )
    )

It's good to prefer themes for styling like this, so avoid doing more than once.

You'll still need to add a Scrollbar and Controller as described in other answers though.


Solution 4: Kartik Malhotra

You can change the scrollbartheme to set flag isAlwaysShown true

scrollbarTheme: const ScrollbarThemeData(isAlwaysShown: true)


Solution 5: S_99_chandra

thumbVisibility make true for show always scroll bar for list in scrollbar widget

Scrollbar(thumbVisibility: true,)


Solution 6: Sharon Atim

'isAlwaysShown' is deprecated and shouldn't be used. Use thumbVisibility instead.

Example:

Scrollbar(
   controller: ScrollController(),
    thumbVisibility: true,
      child: SingleChildScrollView(
        child: Column(