Remove the top padding from ScrollBar when wrapping ListView

user_3551086 0
Viewed 3771

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.

here is my code:

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

result when scrolling position is 0:

enter image description here

dart flutter listview
2 Answers

enter image description here 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;
  }
}
user_41551650

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'),
      ),
user_107959370
Related