CODEWITHSUNDEEP
flutterdart
Mojtaba Hoseinpour
Mojtaba Hoseinpour

Reputation: 567

Scrollbar not displayed flutter web

Scrollbar not displayed in flutter web. my second try is:

Widget getSecondStep() {
        return  DraggableScrollbar.arrows(
          controller: ScrollController(),
          child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[BlaBlaBla(), BlaBla()],
                ),
              ],
            ),
        );
      }

and my first try was:

Widget getSecondStep() {
        return  Scrollbar(
          controller: ScrollController(),
          child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[BlaBlaBla(), BlaBla()],
                ),
              ],
            ),
        );
      }

i'm trying to change theme color but it didn't work.

finally, flutter doctor -v

 [√] Flutter (Channel beta, v1.14.6, on Microsoft Windows [Version
 10.0.18362.657], locale en-US)
     • Flutter version 1.14.6 at C:\flutter_windows_v1.9.1+hotfix.2-stable\flutter
     • Framework revision fabeb2a16f (4 weeks ago), 2020-01-28 07:56:51 -0800
     • Engine revision c4229bfbba
     • Dart version 2.8.0 (build 2.8.0-dev.5.0 fc3af737c7)


 [√] Android toolchain - develop for Android devices (Android SDK
 version 29.0.2)
     • Android SDK at C:\Users\moshi\AppData\Local\Android\sdk
     • Android NDK location not configured (optional; useful for native profiling support)
     • Platform android-29, build-tools 29.0.2
     • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
     • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
     • All Android licenses accepted.

 [√] Chrome - develop for the web
     • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

 [√] Android Studio (version 3.5)
     • Android Studio at C:\Program Files\Android\Android Studio
     • Flutter plugin version 40.0.2
     • Dart plugin version 191.8423
     • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

 [!] VS Code (version 1.42.1)
     • VS Code at C:\Users\moshi\AppData\Local\Programs\Microsoft VS Code
     X Flutter extension not installed; install from
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

 [√] Connected device (2 available)
     • Chrome     • chrome     • web-javascript • Google Chrome 79.0.3945.130
     • Web Server • web-server • web-javascript • Flutter Tools

 ! Doctor found issues in 1 category.

Upvotes: 12

Views: 10730

Answers (5)

Adam Smaka
Adam Smaka

Reputation: 6413

EDIT: MAY 2021 UPDATE: Scrollbar should be visible by default since Flutter 2.2

OLD ANSWER:

Wrap a ListView with Scrollbar and use the same scroll controller like this:

          Scrollbar(
            isAlwaysShown: true,
            controller: _scrollController,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return Card(
                      child: ListTile(
                    title: Text("Item: ${index + 1}"),
                  ));
                }),
          ),

Upvotes: 7

JaffaKetchup
JaffaKetchup

Reputation: 1636

This is the 'intended' functioning. Remember, web is still in beta, and currently most Flutter Web apps look and behave like Android Material/iOS apps, which obviously don't have a scrollbar. For the same reason, you can click and drag using the mouse, and the page will move up and down.

There is currently a GitHub issue opened on this topic (which you can find at this link). Bear in mind it is a feature request.

EDIT: As of April 2nd, there is now configurable scrollbar support built into flutter!

Upvotes: 3

user594326
user594326

Reputation:

as of flutter 2.2 default behaviour for most scrollable widgets on web and desktop is to display scrollbar while scrolling and to quickly fade away the scrollbar when scrolling has ended. to persist the scrollbar after scrolling has ended wrap the scrollable widget in a theme as follows:

Theme(
    data: Theme.of(context).copyWith(scrollbarTheme: const ScrollbarThemeData(isAlwaysShown: true)),
    child: SingleChildScrollView(
       controller: scrollController,

Note the added scrollController to avoid conflicting positions of the PrimaryScrollController if you are using multiple scrollable widgets.

One last thing to note is that if you wish the scrollbar to be visible even before first scrolling you have to hack it somehow. My solution was to scroll programmatically after the frame has been built:

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  scrollController.animateTo(3, duration: const Duration(milliseconds: 200), curve: Curves.ease);
});

Hope this comes in handy some day...

Upvotes: 3

mik
mik

Reputation: 809

2021 March UPDATE: with Flutter 2.0, Flutter Web is now available in the Stable channel, and you can use

Scrollbar(controller: _scrollController, isAlwaysShown: true, child: ...

To display the scrollbar and interact with it :) Just make sure the controller of your scrollbar and list is the same one.

Upvotes: 1

Shivam Modi
Shivam Modi

Reputation: 150

Currently flutter web working is similar to that of a android/iOS application. It doesn't support the scrolling through scrollbar. You have to use a customized, if you want to use one for your web application then you should definitely look for the flutter_web_scrollbar package in pub.dev.

Upvotes: 0

Related Questions