I am trying to add ScrollBar
to ListView
in Flutter but the ScrollBar
still have padding on top when scrolling to the start of the ListView
.
I included a snapshot of the application so you can understand the problem better. it`s in the indicator of the scrollbar widget the top padding should not be there ,so the start of the scrollbar indicator should touch the bottom edge of the blue DrawerHeader.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final sc = ScrollController(initialScrollOffset: 0);
final res = MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
body: null,
drawer: Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
margin: EdgeInsets.zero,
),
Expanded(
child: Scrollbar(
radius: Radius.circular(30),
thickness: 10,
controller: sc,
isAlwaysShown: true,
child: ListView(
shrinkWrap: false,
controller: sc,
padding: EdgeInsets.only(top: 0),
children: <Widget>[
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
...
],
),
),
),
],
),
), // Populate the Drawer in the next step.
),
),
);
return res;
}
}
use MediaQuery.removePadding widget with removeTop: true
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final sc = ScrollController(initialScrollOffset: 0);
final res = MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
body: null,
drawer: Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
margin: EdgeInsets.zero,
),
Expanded(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Scrollbar(
radius: Radius.circular(30),
thickness: 10,
controller: sc,
isAlwaysShown: true,
child: ListView(
shrinkWrap: false,
controller: sc,
padding: EdgeInsets.only(top: 0),
children: <Widget>[
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
},
)
],
),
),
),
),
],
),
), // Populate the Drawer in the next step.
),
),
);
return res;
}
}
Scrollbar padding is set as follows:
ScrollbarPainter _buildMaterialScrollbarPainter() {
return ScrollbarPainter(
color: _themeColor,
textDirection: _textDirection,
thickness: widget.thickness ?? _kScrollbarThickness,
radius: widget.radius,
fadeoutOpacityAnimation: _fadeoutOpacityAnimation,
padding: MediaQuery.of(context).padding,
);
}
The solution to remove the padding in your case would be to place your Scaffold inside the SafeArea.
home: SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Driver App'),
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.