How to Customize DropDown in flutter?

Question

In flutter i have tried to modify drop down like below

i have tried using overlay with container but overlay is taking positioned from entire page. how to give positioned from previous widget to overlay

```import 'package:flutter/material.dart'; 
List titles = ['a','b','c','d',];

class sample extends StatefulWidget {
@override
CountriesFieldState createState() => CountriesFieldState();
}

class CountriesFieldState extends State<sample> {
final FocusNode _focusNode = FocusNode();
  OverlayEntry _overlayEntry;

final LayerLink _layerLink = LayerLink();

OverlayEntry _createOverlayEntry() {
RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var offset = renderBox.localToGlobal(Offset.zero);
return OverlayEntry(
    builder: (context) => Positioned(
          child: Container(
            height: 240,
            width: 320,
            child: Scaffold(
              body: Container(
                margin: EdgeInsets.only(top: 8),
                //color: Colors.red,
                child: Column(
                  children: <Widget>[
                    new Expanded(
                        child: ListView.builder(
                      itemBuilder: (BuildContext context, int index) {
                        return new Container(
                          //width: (320/360)*screenWidth,

                          decoration: new BoxDecoration(
                              border: new Border.all(color: Colors.white),
                              color: Colors.white),
                          child: new ListTile(
                            //dense: true,
                            contentPadding: EdgeInsets.only(
                                bottom: 0, left: 15, top: 0),
                            onTap: () {
                              _overlayEntry.remove();
                            },
                            title: new Text(
                              titles[index],
                              textAlign: TextAlign.left,
                              style: new TextStyle(
                                  fontSize: 15,
                                  fontFamily: "IBM Plex Sans Medium",
                                  fontWeight: FontWeight.w500,
                                  color: const Color(0xFF999aab)),
                            ),
                          ),
                        );
                      },
                      itemCount: titles.length,
                    )),
                  ],
                ),
              ),
            ),
          ),
        ));
 }

 @override
 Widget build(BuildContext context) {
  return Scaffold(
  body: Column(
    children: [
      new InkWell(
          child: Align(
            alignment: Alignment.center,
            child: Container(
              margin: EdgeInsets.only(top: 100),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                      width: 1.0, color: Colors.lightBlue.shade900),
                ),
                // color: Colors.red,
              ),
              height: 50.0,
              width: 300.0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[Text("abc")],
              ),
            ),
          ),
          onTap: () {
            this._overlayEntry = this._createOverlayEntry();
           Overlay.of(context).insert(this._overlayEntry);
          })
    ],
  ),
);
}
 }```

i have used overlay concept to achieve this. Is there any other solution to achieve customized dropdown???

Answer 1

This will help to achive your goal.

List titles = ['a','b','c','d',];

class Sample extends StatefulWidget {
@override
CountriesFieldState createState() => CountriesFieldState();
}

class CountriesFieldState extends State<Sample> {
final FocusNode _focusNode = FocusNode();
  OverlayEntry _overlayEntry;
 GlobalObjectKey  _globalObjectKey = GlobalObjectKey(ValueKey('a_key_that_different_from_any_other'));   // ADD THIS LINE
 
final LayerLink _layerLink = LayerLink();

OverlayEntry _createOverlayEntry() {
   RenderBox renderBox =_globalObjectKey.currentContext?.findRenderObject(); //EDIT THIS LINE
    var size = renderBox.size;
    var offset = renderBox.localToGlobal(Offset.zero);

return OverlayEntry(
    builder: (context) => Positioned(
          child: Container(
            height: 240,
            width: 320,
            child: Scaffold(
              body: Container(
                margin: EdgeInsets.only(top: 8),
                //color: Colors.red,
                child: Column(
                  children: <Widget>[
                    new Expanded(
                        child: ListView.builder(
                      itemBuilder: (BuildContext context, int index) {
                        return new Container(
                          //width: (320/360)*screenWidth,

                          decoration: new BoxDecoration(
                              border: new Border.all(color: Colors.white),
                              color: Colors.white),
                          child: new ListTile(
                            //dense: true,
                            contentPadding: EdgeInsets.only(
                                bottom: 0, left: 15, top: 0),
                            onTap: () {
                              _overlayEntry.remove();
                            },
                            title: new Text(
                              titles[index],
                              textAlign: TextAlign.left,
                              style: new TextStyle(
                                  fontSize: 15,
                                  fontFamily: "IBM Plex Sans Medium",
                                  fontWeight: FontWeight.w500,
                                  color: const Color(0xFF999aab)),
                            ),
                          ),
                        );
                      },
                      itemCount: titles.length,
                    )),
                  ],
                ),
              ),
            ),
          ),
        ));
 }


 @override
 Widget build(BuildContext context) {
  return Scaffold(
  body: Column(
    children: [
      new InkWell(
          child: Align(
            alignment: Alignment.center,
            child: Container(
              key: _globalObjectKey, // ADD THIS LINE
              margin: EdgeInsets.only(top: 100),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                      width: 1.0, color: Colors.lightBlue.shade900),
                ),
                // color: Colors.red,
              ),
              height: 50.0,
              width: 300.0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[Text("abc")],
              ),
            ),
          ),
          onTap: () {
            this._overlayEntry = this._createOverlayEntry();
           Overlay.of(context).insert(this._overlayEntry);
          })
    ],
  ),
);
}
 }