I want to implement flutter popover plugin, so I just copied and paste the example code given in popover plugin link, but i got this error when i click the popover:
Type 'RenderSilverList' is not a subtype of 'RenderBox' in type cast.
Here below there is my code:
return Scaffold(
appBar: createStandardAppBar(title: "Articoli"),
body: Flex(
direction: Axis.vertical,
children: [
Expanded(
child: Stack(
children: [
Positioned(
top: 99,
bottom: 75,
left: 0,
right: 0,
child: Container(
color: Colors.white,
child: ListView.builder(
itemCount: _loadedItems.length,
itemBuilder: (context, index){
return GestureDetector(
onTap: () {
setState(() {
});
},
behavior: HitTestBehavior.translucent,
child: Padding(
padding: EdgeInsets.zero,
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
child: Row(
//crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(_loadedItems[index]['id'], style: TextStyle(color: headerInfoColor, fontWeight: FontWeight.bold, fontSize: 12, overflow: TextOverflow.ellipsis),),
SizedBox(height: 5,),
Text(_loadedItems[index]['descr'], maxLines: 2, style: TextStyle(fontSize: 10, overflow: TextOverflow.ellipsis),),
],
),
),
Expanded(
flex: 1,
child: Column(
children: [
Text("€60,00")
],
),
),
Expanded(
flex: 1,
child: _loadedItems[index]['iFlagTaglieColori'] == 0 ?
Row(
children: [
Expanded(child: IconButton(onPressed: () => {}, icon: Icon(Icons.remove, color: Colors.black45, size: 15,), padding:EdgeInsets.zero,),),
GestureDetector(
onTap: (){
showPopover(
context: context,
transitionDuration: const Duration(milliseconds: 150),
bodyBuilder: (context) => const ListItems(),
onPop: () => print('Popover was popped!'),
direction: PopoverDirection.left,
width: 200,
height: 400,
arrowHeight: 15,
arrowWidth: 30,
);
},
child: Container(
padding: EdgeInsets.all(4),
child: Text("10"),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[400]!),
borderRadius: BorderRadius.all(Radius.circular(5))
),
),
),
Expanded(child: IconButton(onPressed: () => {}, icon: Icon(Icons.add, color: Colors.black45, size: 15,), padding:EdgeInsets.zero,),),
],
)
:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Text("Taglie/Colori", textAlign: TextAlign.center, style: TextStyle(fontStyle: FontStyle.italic, fontSize: 12,),),
)
],
)
),
],
),
),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Color(0xFFE7E7E7), width: 0.5),
)
),
)
);
}
),
),
),
Positioned(
top: 48,
left: 0,
right: 0,
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 17, horizontal: 5),
child: Row(
children: [
Expanded(
flex: 2,
child: Text("Descrizione", textAlign: TextAlign.center,),
),
Expanded(
flex: 1,
child: Text("Prezzo", textAlign: TextAlign.center,),
),
Expanded(
flex: 1,
child: Text("Quantita", textAlign: TextAlign.center,),
)
],
),
),
decoration: BoxDecoration(
color: Colors.grey[350]
),
),
),
AnimatedPositioned(
top: _dropDownOpened ? 48 : -3,
child: Container(
height: 50,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 5),
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 2, horizontal: 2),
child: Stack(
children: [
Row(
children: [
Expanded(
child: AnimatedOpacity(
opacity: _searchModeSelection == 1 ? 1 : 0,
duration: Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
),
),
Expanded(
child: AnimatedOpacity(
opacity: _searchModeSelection == 2 ? 1 : 0,
duration: Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
),
)
],
),
Row(
children: [
Expanded(
child: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
_searchModeSelection = 1;
});
},
icon: Icon(Icons.search, color: _searchModeSelection == 1 ? Colors.white : Colors.black45)
)
),
Expanded(
child: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
_searchModeSelection = 2;
});
},
icon: Icon(CupertinoIcons.barcode, color: _searchModeSelection == 2 ? Colors.white : Colors.black45,)
)
)
],
),
],
)
),
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
)
)
],
),
),
Expanded(
flex: 2,
child: Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 5),
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 2, horizontal: 2),
child: Stack(
children: [
Row(
children: [
Expanded(
child: AnimatedOpacity(
opacity: _itemsViewSelection == 1 ? 1 : 0,
duration: Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
),
),
Expanded(
child: AnimatedOpacity(
opacity: _itemsViewSelection == 2 ? 1 : 0,
duration: Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
),
),
Expanded(
child: AnimatedOpacity(
opacity: _itemsViewSelection == 3 ? 1 : 0,
duration: Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
),
),
Expanded(
child: AnimatedOpacity(
opacity: _itemsViewSelection == 4 ? 1 : 0,
duration: Duration(milliseconds: 200),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
),
)
],
),
Row(
children: [
Expanded(
child: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
_itemsViewSelection = 1;
});
},
icon: Icon(CupertinoIcons.list_dash, color: _itemsViewSelection == 1 ? Colors.white : Colors.black45)
)
),
Expanded(
child: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
_itemsViewSelection = 2;
_futuremisc = _getItems(_itemsViewSelection);
});
},
icon: Icon(Icons.local_shipping_outlined, color: _itemsViewSelection == 2 ? Colors.white : Colors.black45,)
)
),
Expanded(
child: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
_itemsViewSelection = 3;
});
},
icon: Icon(Icons.history_outlined, color: _itemsViewSelection == 3 ? Colors.white : Colors.black45,)
)
),
Expanded(
child: IconButton(
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
_itemsViewSelection = 4;
});
},
icon: Icon(Icons.local_grocery_store_outlined, color: _itemsViewSelection == 4 ? Colors.white : Colors.black45,)
)
)
],
),
],
)
),
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.all(Radius.circular(20))
),
),
)
)
],
),
),
],
),
decoration: BoxDecoration(
color: Colors.grey[350]
)
),
duration: Duration(milliseconds: 200)
),
Material(
elevation: 1,
child: Container(
color: Color(0XFFFCFCFC),
child: Padding(
padding: EdgeInsets.fromLTRB(15, 0, 5, 0),
child: Row(
children: [
Expanded(
flex: 300,
child: Row(
children: [
Icon(Icons.search, size: 20, color: Colors.blue,),
SizedBox(width: 5,),
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: AppLocalizations.of(context)!.search,
hintStyle: TextStyle(color: genericHintColor),
border: InputBorder.none,
),
onChanged: _onSearchTextChanged,
),
),
if(_currentSearch.length != 0)
IconButton(
onPressed: () {
_controller.clear();
_onSearchTextChanged('');
},
icon: Icon(Icons.cancel_outlined, size: 20, color: Colors.blue)
)
],
),
),
Spacer(),
Row(
children: [
IconButton(onPressed: () => {}, padding: EdgeInsets.zero, icon: Icon(Icons.qr_code_scanner_outlined, color: Colors.blue, size: 20,)),
IconButton(onPressed: () => {}, padding: EdgeInsets.zero, icon: Icon(Icons.person, color: Colors.blue, size: 20,)),
IconButton(onPressed: () => {}, padding: EdgeInsets.zero, icon: Icon(Icons.filter_alt_outlined, color: Colors.blue, size: 20,)),
IconButton(
onPressed: () {
setState(() {
_dropDownOpened = !_dropDownOpened;
});
},
padding: EdgeInsets.zero,
icon: Icon(
_dropDownOpened ? Icons.keyboard_arrow_up_rounded : Icons.keyboard_arrow_down_rounded,
color: Colors.blue,
size: 20,
)
)
],
),
],
)
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 75,
child: Column(
children: [],
),
decoration: BoxDecoration(
color: Colors.blue
),
),
)
],
),
)
],
)
);
The showPopover method throw an Exception when reached this line of code:
final box = widget.context.findRenderObject() as RenderBox;
I'm stuck and I don't know where to search. Please help me.
I ran into this issue myself. When I searched through the internet, there were not enough answers to the particular issue when using showPopver flutter package.
This problem is a little peculiar because of the way the package acquires widget coordinates. One has to wrap the button (icon button or other types of button) that triggers the popup into a class so its own context is used independent of the context of the enclosing widget that has the button. To solve your exact issue, you can just wrap the gesture detector in your code into a stateless widget class as bellow:
class MyPopoverButton extends StatelessWidget {
// add constructor and parameters here to make the code complete...
@override
Widget build(BuilderContext context) {
return
GestureDetector(
onTap: (){
showPopover(
context: context,
transitionDuration: const Duration(milliseconds: 150),
bodyBuilder: (context) => const ListItems(),
onPop: () => print('Popover was popped!'),
direction: PopoverDirection.left,
width: 200,
height: 400,
arrowHeight: 15,
arrowWidth: 30,
);
},
child: Container(
padding: EdgeInsets.all(4),
child: Text("10"),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[400]!),
borderRadius: BorderRadius.all(Radius.circular(5))
),
),
);
}
}
The theory behind this is that the popover is expecting a render box ancestor, and warping the button that triggers the popover into a class, the button's own builder context will satisfy the requirements.
Give it a try if anyone else runs into the same issue. Hope it helps!