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
– rickimaru, Commented Mar 25, 2021 at 1:48
I'm not sure how you modified your code... Try my answer below... — rickimaru
– rickimaru, Commented Mar 25, 2021 at 14:24

rickimaru · Accepted Answer · 2021-03-25 14:25:25Z

-1

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

answered Mar 25, 2021 at 14:25

rickimaru

2,54011 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eqrakhattak Over a year ago

I'm sorry, i dont see a SingleChildScrollView. Which scrollabe child did u use and where?

rickimaru Over a year ago

@icyNerd In this example, I'm using ListView as a child of CoverWidget.

Collectives™ on Stack Overflow

Scrollbar in Flutter Web 2.0

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related