Always show scrollbar - Flutter

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),                    ),                  ),                ),              ),              // ...            ],          ),        ),      ),    );  }}

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()),          ),        ),      );    },  ),);