Get api and navigations

[Shrut_Patel]

Hi, I’m working on a screen with a ListView that shows items from an API on the left. I want to enable navigation from each placeholder to the component on the right side, where more details of the selected placeholder will be displayed. How can I set up this navigation to ensure that the updated data (from get api) appears in the right-side container for each selected placeholder?

[Shrut_Patel]

Hello,
The image below shows ,
Left Side: A list of facilities (made with listview)
Right Side: Facility details (which is a component)
I want the facility details screen on the right to become visible when a facility is clicked on the left screen.

Current Setup:

1. I’ve wrapped the right-side component in a visibility wrapper.
2. I’ve created a boolean variable to control visibility and set it to false initially.

How can I programmatically show the hidden component (on the right side) within the circuit after the OnTap event? so that it becomes visible after user clicks on one facility in the list
Also please note that the left side listview is wrapped in a databuilder to recieve data from an api request and the other details of the api request must be shown in the right side component via elements

[anas]

Hey @Shrut_Patel , thanks for posting here! what you build seems very nice.

So what I would do, is first left up the Data builder wrapper to be on the screen level so the component and the listview can access the data list.

In this case, you would

1. Create a variable in the screen called selectedIndex
2. Use ListTile widget as a component in the listview, because it has something called isSelected.
3. Create a parameter of this isSelected
4. inside the Listview itself, it will ask me to pass a value of isSelected to each placeholder. Create a compute function to caluclate if that placeholder is the selected one
5. For that function of callback, create a param called currentIndex then create a logic to return if that currentIndex is the selectedIndex
6. You need to pass the currentIndex to that function from inside the Listview, since any widget under listview will have a var called index which is the index of that instance that is part of the list. So, pass that index to the function created as the currentIndex
7. For the buttons of up and down, all you need is to add one or subtract one from the selectedIndex and call refresh in the end

What will happen then is that when you press the button down, the selectedIndex will increase from 0 to 1, and since isSelected is a function that will calculate, the first item will see that the selectedIndex, which is 1, is not the same as the currentIndex of that item, which is 0, but the 2nd item in the list, it’s currentIndex is 1 and the selectedIndex is 1 so isSelected will be true so it will be highlighted

8. I will then create the component to display the info from the single item. In this example since I am connecting the API to wordpress, let’s say I want to see the title and description for that selected blog, so I will have two Text widgets, each will have their text property connected to a parameter like title and desc

9. Add that component inside the screen so it have access to the data list, then for the parameters title and desc, connect them to data[currentIndex]..... This will make you get the item from the list which have the same order as the selectedIndex, then bring what you need from there. Since I am using wordpress, the data[currentIndex] returns a single blog, then I would go to the title using ....title.rendered. For your case it depends on the API itself

Here’s the full video of doing so:

Selectable lists with a details component - Watch Video
](Selectable lists with a details component | Loom)

Hope it helps!

[Shrut_Patel]

Thank you so much @anas this helped to make the screens work!

[Shrut_Patel]

Hello, i need help with this.
this is a simple thing but i can’t figure out why the scrolling of the listview goes all the way up the screen. I want the scrollview to be within the listview limits so that when scrolling (as shown in the gif.file below), the blue part of the placeholder doesnt go beyond the listview upper limit.

[anas]

@Shrut_Patel

this is a simple thing but i can’t figure out why the scrolling of the listview goes all the way up the screen. I want the scrollview to be within the listview limits so that when scrolling (as shown in the gif.file below), the blue part of the placeholder doesnt go beyond the listview upper limit.

Hey! First of all great progress Congrats on getting there! I really can’t wait to see the final results for your app.

For the listview scrolling going up, try to check the layout of the Listview widget, select the widget and check it’s height and try to make it Fixed

Another thing you can try is to wrap the listview widget with Clip radius: this wil clip the overflowed part of the widget.

Let me know if any of them worked out!

By the way, I would like to know more on what are you building so me and the team can help you the best. How about we jump on a quick call? if yes, feel free to book the time that suits you here. Can’t wait to talk to you!

[Shrut_Patel]

Hi, i tried all the options given but none of them worked with the scrolling issue of the listview, so i just reduced the transparency of the blue box