Always show scrollbar - Flutter

Question

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

Answer 1

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

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