Hola readers!! Welcome to my first blog of Flutter. Do you want to display a list of objects something like this:-
when +6 widget is clicked it expands like this:-
Then you are in right place. Before creating this widget I searched a lot about creating this type of menu expansion but I didn’t find any solid solution to go with. Even stack overflow have same problem mentioned but is still not answered with the needed stuff.I somehow got stuck with an idea using expandable widget and was able to generate the widget I wanted to. Thought that many newbies like me will be stuck with same feature someday so how about sharing it with them. So let’s get started :)
We will be displaying a list of chips as our menu list. For making our widget more dynamic we will be creating it as ageneric type which will accept any type of object and can show a specific piece of data of that object using the selection name passed as the parameter to our widget.
We will start with creating our widget named ExpansionChipList<T> as a generic type stateful widget which the user can decide according to their need, be it String or any class model we can pass the model type while creating the ExpansionChipList Widget. It will contain name(String) and listOfObj(List<T>) as class variables.
Now we will create a function to create Chip widget for any given string.
Then we will create a function that converts our generic list to a list of Chip widgets. We will use jsonDecode and jsonEncode functions present in dart::convert library to get data from our model using string parameter passed.💡Idea:- jsonEncode converts our object to string and then jsonDecode will convert that string to object of type json.Hence using our key i.e. our string parameter we will be able to get our data.
Now comes the main part of the class that is the build function. Here first we will call chipWidgetList function to create a list of chips. Then we will use Expandable Widget which has two main attributes i.e. collapsed which takes the widget to be displayed when in collapsed or contract position and expanded which takes widget when the list is expanded. We use ExpandableNotifier as parent which provides expansion controller to its children which is the expandable widget. Now expandable widget is driven by the controller given by the expandableNotifier uses the Expansion button widget to expand and collapse the expandable widget.
In collapsed view we want maximum of 2 Chips to be shown and others are shown as quantity on a single chip and when this single chip is clicked it should expand. So in expanded attribute we pass whole list of chips if its length is less than 2 or else we only pass two chips from the list inside a wrap with a expandable button with the number of chips hidden.
In Expanded view we show whole list in a wrap with an arrow icon to collapse as the Expanded button.
Now we will create data model whose object list we will pass to our custom widget and is shown as a list. Here I have taken a dataModel of hair products in a shop.
To test our custom widget I have created the ExpansionChipList widget and passed the type of dataModel to it. I chose to display the name from my dataModel so I passed the string param as name and listOfProduct which is the list of dataModel object.
Finally we reached the end of our coding part😄.
Run the app and get the desired result :)..
A big thank you for being with the article till the end. Hope it helped you. Do let me know your suggestions or comments or your own work. Till then keep coding keep fluttering 🙌:D!!
GitHub Link: https://github.com/UVCoder1002/Menu_Expansion_Using_Expandable_Widget
