parent child relation ship using flutter listview builder

[probegins]

Hi,

I am new to flutter and started to use your package for my current application.

I have an issue. I can explain how my interface is and what I am trying ti achieve.

I have 2 section(container) in my screen. The screen is divided into 2 parts. The first part contains a list view builder and second also contains listviewbuilder. I already have one to one relationship b/w data. What I mean here, When I try to change any data in first listview, it should show in second listview builder but only in realted field in second listview builder.

I can say that I have textfield controller in both listview builders. If I eneter a number in first listview builder textbox, that should capture and show in second listviewbuilder if it is related with first textbox controller. if there is no relation, it should not show. I am not getting an idea how to do relationship and get all data from both listviewbuilder when submit data.

I am getting data in bloc but I don'r know where to insert in second list view builder. HO can I make correct reltation ship b/w this

[probegins]

I will have many textfields in both listviewbuilder but only update if it is related

[frideosapps]

Hello @probegins, I am not sure to fully understand the result that you would want to achieve. Could you provide a repo to show some code?

[probegins]

I have 2 list view builder in same screen

First list view contains 6 textbox

Second list view contains 3 textbox

Now I am trying to enter a number 10 in first list view builder ( for instance ,I entered in 4th row). Now textbox will show number 10. If this textbox is related with second list view builder textbox ( say 2nd one), then number 10 will show in this textbox. Pls note down that if it doesn't have any relation, the number will not show in second list view builder. So both list view will show same number, if related.

https://pasteboard.co/IcTYPNE.jpg

I have uploaded an image, if you notice that image , you can see that it has 2 sections.

Look at the number 13 in first column , in this row you can see a number 6

Now you look at the number 2 in last section , in this row you can see the same number 6 again. What ever I entered in first section appears here since itbhas relation.

You can see that there are many numbers in first section such as 2 & 5 but that doesnt appear in second section since itbhas no relation.Hope you got it now

I don't know listview builder widget is right for this scenario. I have also seen table widget but no idea which one provide result. As I have many rows I decided to use list view builder and managing state

[frideosapps]

Hello @probegins , I've just added an example. Let me know if I understood correctly what you meant.

Example name: 'Products catalog':

• Bloc
• Screen

[probegins]

Hello, when we launch screen we should have 2 section.
for eg: prdocuts1 section and under that another section (product2 section). Some of the items in products2 section are related to products1 items section. For instance, we can say 2 items are related to products2 section. (apple & pc). The item name "bag" has no relation in second section

products1 section

item_name quantiy price
apple 0 1USD
bag 0 2 USD
PC 0 10 USD

products2 section

item_name quantity price
apple1 0 12 USD
PC1 0 20 USD

The above 2 will be the default look and feel when we open the page

when we enter a number in products1 section , say I am going to enter 5 in apple row as quantity, that number should appear in product2 section if apple and apple1 are related. If it's related we get following output on the screen

products1 section

item_name quantiy price
apple 5 5USD
bag 0 2 USD
PC 0 10 USD

products2 section

item_name quantity price
apple1 5 60 USD
PC1 0 20 USD

The changes happens only in apple & apple1 row as per above screens. I am again going to enter quantity as 10 in bag row but think that it has no related item in products2 section, then the output will be

products1 section

item_name quantiy price
apple 5 5USD
bag 10 20 USD
PC 0 10 USD

products2 section

item_name quantity price
apple1 5 60 USD
PC1 0 20 USD

We can see that whatever entered early reaming same even if we change bag. Hope now it is clear.

How second section knows what are the items it is related to first section, we need to find that row then we should be able to update only that row.

[frideosapps]

It isn't how it works in the example I wrote? I've used the 'id' property of the product to establish a relation between fields in a different place.

Pay attention to these methods:

  void addItem(int id) {
    if (!cart.value.any((item) => item == id)) {
      // Add the item to the cart
      cart.addElement(id);
      getItem(id).refreshTotal();

      final item = catalog.value.firstWhere((item) => item.id == id);

      // To disable the add button
      item.added.value = true;
    } else {
      print('already in the cart');
    }
}

  void changeQuantity(int id, String value) {
    final qnt = int.tryParse(value);
    final item = catalog.value.firstWhere((item) => item.id == id);

    if (qnt != null && qnt > 0) {
      item.quantity.value = int.tryParse(value);
      item.refreshTotal();
    } else {
      item.quantity.stream.addError('Insert a valid quantity.');
    }
}

In the firts part of the screen you have the catalog when you can add an item and set a quantity. In the addItem method you add to the cart a product from the catalog by using the 'id' property. The changeQuantity method it is used to set a new quantity for the item in the catalog with the given id. To populate the list of the the products in the cart, you can just use a list of 'id' to put in relation the products in the cart with the ones in the catalog. As I have a little free time I'll improve the comments on the code.

[gitflutter]

Thanks

we have following code

const products = {
  112: Product(name: 'Phone', price: 230.59),
  19: Product(name: 'Shirt', price: 30.49),
  812: Product(name: 'Guitar', price: 800.69),
  139: Product(name: 'Headphones', price: 200.99),
  12: Product(name: 'Shoes', price: 90.89),
  136: Product(name: 'PC', price: 786.99),
  101: Product(name: 'Apple', price: 0.99)
};

If I want to load data from API what are the changes in class ExampleBloc extends BlocBase {

[frideosapps]

@gitflutter you need to create model class to deserialize the json resulted from the API. You can find an example on how you can achieve this in the Trivia example.

• Category model
• Question model
• API.

You may want to give a look at this article where you can find a detailed explanation: "How to build a quiz game".