Flutter how to remove padding on top of scrollbar listview

Viewed 419

First of all, sorry for my bad english. So my question is why there are some padding on top of the scrollbar and how to remove it? I think there's a problem with the overlay widget in my code but I can't find the problem and how to solve it. Please help and thank you. PS: I don't want to use the default dropdown widget because I don't really like the design so I made a custom dropdown button with some help from other code.

So here's my code :

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool dropdownOpen = false;
  OverlayEntry dropdown;
  dynamic actionKey = LabeledGlobalKey("actionKey");
  ScrollController sc = ScrollController();
  
  OverlayEntry createDropdown() {
    RenderBox renderBox = actionKey.currentContext.findRenderObject();
    Offset offset = renderBox.localToGlobal(Offset.zero);
    return OverlayEntry(
      builder: (context) {
        return Positioned(
          left: offset.dx,
          width: renderBox.size.width,
          top: offset.dy + renderBox.size.height,
          height: 230,
          child: Material(
            elevation: 20,
            child: Scrollbar(
              isAlwaysShown: true,
              controller: sc,
              child: ListView.builder(
                controller: sc,
                padding: EdgeInsets.all(0),
                itemCount: 5,
                itemBuilder: (BuildContext context, int index){
                  return Container(
                    height: 50,
                    alignment: Alignment.center,
                    child: Text((index+1).toString())
                  );
                }
              )
            )
          )
        );
      }
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            key: actionKey,
            child: Container(
              height: 50,
              width: 100,
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text("Click")
            ),
            onTap: (){
              setState((){
                if(dropdownOpen){
                  dropdown.remove();
                  dropdownOpen = false;
                } else {
                  dropdown = createDropdown();
                  Overlay.of(context).insert(dropdown);
                  dropdownOpen = true;
                }
              });
            }
          )
        )
      ),
    );
  }
}

and here's what it looks like : image

0 Answers
Related