Scrollbar in Flutter Web 2.0

Question

I'm trying to put a Scroll Bar in my web app, the Scrollbar appeared but when I tried to move it, it didn't move. I can see the bar but I can't drag it. I can scroll using the mouse scroller wheel but not with the bar. Saw this but it didn't help. Is it about the ScrollController? controller or what?

Here is my code:

class CoverWidget extends StatelessWidget {
final widget;
const CoverWidget({Key key, @required this.widget}) : super(key: key);

@override
Widget build(BuildContext context) {
double w = MediaQuery.of(context).size.width;

return Scrollbar(
  isAlwaysShown: true,
  child: Container(
      margin: EdgeInsets.only(left: 15, right: 15, top: 15),
      padding: EdgeInsets.only(
        left: w * 0.05,
        right: w * 0.20,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(0),
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.grey[300], blurRadius: 10, offset: Offset(3, 3))
        ],
      ),
      child: widget
  ),
);}}

For the `Scrollbar` to be displayed, its child should be scrollable. Have you tried wrapping the `Container` inside a `SingleChildScrollView`? — rickimaru, Mar 25 '21 at 01:48
I'm not sure how you modified your code... Try my answer below... — rickimaru, Mar 25 '21 at 14:24

score -1 · Answer 1 · answered Mar 25 '21 at 14:25

Here's a sample code for ScrollBar with a scrollable child.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: CoverWidget(
            child: ListView(
              children: List.generate(
                100,
                (index) => ListTile(
                  title: Text('This is item #$index'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class CoverWidget extends StatelessWidget {
  CoverWidget({
    required this.child,
    Key? key,
  }) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      isAlwaysShown: true,
      child: Container(
        margin: EdgeInsets.only(left: 15, right: 15, top: 15),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.grey,
              blurRadius: 10,
              offset: Offset(3, 3),
            )
          ],
        ),
        child: child,
      ),
    );
  }
}

I'm sorry, i dont see a `SingleChildScrollView`. Which scrollabe child did u use and where? — eqrakhattak, Mar 25 '21 at 14:40
@icyNerd In this example, I'm using `ListView` as a `child` of `CoverWidget`. — rickimaru, Mar 26 '21 at 01:06

Scrollbar in Flutter Web 2.0

1 Answers1