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
),
);}}
Solution 1: rickimaru
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,
),
);
}
}