Flutter Expandable in Dropdownmenu - flutter

Question

I am trying to do a Dropdown menu with expandable Items inside.
I also got it working somehow but I am not sure if this the best way to do it.
I want a similar UI to this. A dropdown menu
that transforms into this.
What I did looks like this until now.
And on click this happens
So I got a somehow working Prototype. My issue is the icons like the dropdownmenu arrow icon, the "X" and "+" icons. Like for Example right now I am hiding the dropdown menu arrow because it overlaps with the "+" icon. Also the DropdownMenuItem is not a String but a PanleItem. so I can expand the list without opening the DropdownMenu.
I can't get it to work on the different stages.
I hope I can get some help here or someone can add some references to helpful Articles etc..
This is my Code till now.
import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
class CustomExandableDropDown extends StatefulWidget {
#override
_CustomExandableDropDownState createState() =>
_CustomExandableDropDownState();
}
class _CustomExandableDropDownState extends State<CustomExandableDropDown> {
late String itemName;
late List<PanelItem> _data;
int currentIndex = 0;
List<String> items = ["first", "second", "third"];
#override
void initState() {
super.initState();
_data = generateItems(items.length);
itemName = _data.first.itemName;
}
List<PanelItem> generateItems(int numberOfItems) {
return List<PanelItem>.generate(numberOfItems, (int index) {
return PanelItem(
itemName: items[index],
);
});
}
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
right: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
top: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
bottom: BorderSide(
width: 1,
color: Color(0xFFACACAC),
),
),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container(
child: DropdownButton<String>(
value: itemName,
isExpanded: true,
icon: Container(),
underline: Container(),
items: _data.map<DropdownMenuItem<String>>((item) {
return DropdownMenuItem<String>(
value: item.itemName,
child: ExpandablePanel(
theme: ExpandableThemeData(
hasIcon: false, tapHeaderToExpand: true),
header: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(item.itemName),
Icon(Icons.add),
],
),
collapsed: Container(),
expanded: Container(
width: MediaQuery.of(context).size.width,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.itemName,
softWrap: true,
),
Text(
item.itemName,
softWrap: true,
),
Text(
item.itemName,
softWrap: true,
),
],
),
)),
);
}).toList(),
onChanged: (String? value) {
if (value != null) {
setState(() {
itemName = value;
});
}
},
),
),
),
),
);
}
}
class PanelItem {
PanelItem({
required this.itemName,
this.isExpanded = false,
});
String itemName;
bool isExpanded;
}

Answer 1

ExpansionTile and ExpansionPanel might just be what you are looking for with many example here

Answer 2

To achieve what you want to do you can use Expansion tile. I have something similar on a project which I'm currently working on. see if you can try and customize it for yourself:
//items is list of things which you want to include under each tile for example your //Rinnen Rinnenhalten .....
ExpansionTile(
trailing: Text(
'See all',
style: TextStyle(color: Colors.blue),
),
title: Text('Categories'),
children: [
Wrap(
children: [
for (var i in items)
Container(
width: 100,
height: 50,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BasedOnCats(i.toString())));
},
child: Card(
child: Center(
child: Text(i.toString()),
),
),
))
],
),
],
);