How to make my page scrollable when i show overlay element, that have too many items in flutter? - flutter

Question

I have created a custom dropdown widget, to select one option form a list that i load it from local json file.
When this dropdown field is at the bottom of the screen, the options can not be displayed, because of using overlay element.
Can you help me, how can I solve htis issue?
here is the image that shows my problem
Here is my custom dropdown
import 'package:flutter/material.dart';
class CustomDropdown extends StatefulWidget {
final TextEditingController controller;
final List<Map> items;
final String label;
final String value;
const CustomDropdown({Key key, #required this.controller, #required this.items, this.label, this.value}) : super(key: key);
#override
_CustomDropdownState createState() => _CustomDropdownState();
}
class _CustomDropdownState extends State<CustomDropdown> {
final FocusNode _focusNode = FocusNode();
OverlayEntry _overlayEntry;
final LayerLink _layerLink = LayerLink();
bool isOpened = false;
#override
void initState() {
super.initState();
widget.controller.text = widget.value;
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
this._overlayEntry = this._createOverlayEntry();
Overlay.of(context).insert(this._overlayEntry);
} else {
this._overlayEntry.remove();
}
});
}
OverlayEntry _createOverlayEntry() {
RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var offset = renderBox.localToGlobal(Offset.zero);
return OverlayEntry(
// opaque: true,
builder: (context) => Positioned(
// left: offset.dx,
// top: offset.dy + size.height + 5.0,
width: size.width,
child: CompositedTransformFollower(
link: this._layerLink,
showWhenUnlinked: false,
offset: Offset(0.0, size.height + 5.0),
child: Material(
elevation: 12.0,
child: ListView.builder(
padding: EdgeInsets.zero,
scrollDirection: Axis.vertical,
shrinkWrap: true, // new line
// physics: NeverScrollableScrollPhysics(), // new line
itemCount: widget.items.length,
itemBuilder: (_, index) {
return ListTile(
title: Column(
children: [
SizedBox(
height: 20,
),
Text(widget.items[index]["text"]),
SizedBox(
height: 20,
),
Divider()
],
),
onTap: () {
print("${widget.items[index]["text"]} Tapped");
setState(() {
_focusNode.unfocus();
widget.controller.text = widget.items[index]["text"];
});
},
);
},
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return CompositedTransformTarget(
link: this._layerLink,
child: TextFormField(
controller: widget.controller,
readOnly: true,
// initialValue: 'Test',
focusNode: this._focusNode,
decoration: InputDecoration(
labelText: widget.label.toUpperCase(),
isDense: true,
),
),
);
}
}
and here where i use it:
Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wollen Sie Ihr Profile mit einem Passwort schützen?'.toUpperCase(),
style: TextStyle(fontSize: 20.0, color: theme.inputTextColor),
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: _buildFaceIdOptions(),
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'FaceID verwenden',
style: TextStyle(fontSize: 18.0),
),
_buildToggleButton()
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: _buildPassword(),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: _buildRepeatPassword(),
),
SizedBox(
height: 20,
),
Padding(padding: const EdgeInsets.only(top: 15.0), child: CustomDropdown(controller: questionController, items: _questionList, label: 'Sicherheitsfrage', value: '',)),
SizedBox(
height: 20,
),
// Padding(
// padding: const EdgeInsets.only(top: 15.0),
// child: _buildPassword(),
// ),
SizedBox(
height: 120,
)
],
),
)

Answer 1

You can make the list inside the Overlay scrollable.
You have to set all possible values in the Positioned widget inside OverlayEntry otherwise its content won't be scrollable: if you set width then you have to also set top, bottom and left (or right but not both, read the Positioned widget specifications for that).
Once you set those values the Positioned widget contents will be scrollable.