State structure

Let's take a look at the next nested tree which we want to get:

Home
Shop
├─Catalog-Tab
│ ├─Catalog
│ ├─Category {id: electronics}
│ ├─Category {id: smartphones}
│ └─Product {id: 3}
└─Basket-Tab
  ├─Basket
  └─Checkout

Also, we want the global argument shop with the value catalog to refer to a tab bar state.

Let's create the following state to represent our expectations:

final state = OctopusState(
  intention: OctopusStateIntention.auto,
  arguments: <String, String>{'shop': 'catalog'},
  children: <OctopusNode>[
    OctopusNode(
      name: 'home',
      arguments: <String, String>{},
      children: <OctopusNode>[],
    ),
    OctopusNode(
      name: 'shop',
      arguments: <String, String>{},
      children: <OctopusNode>[
        OctopusNode(
          name: 'catalog-tab',
          arguments: <String, String>{},
          children: <OctopusNode>[
            OctopusNode(
              name: 'catalog',
              arguments: <String, String>{},
              children: <OctopusNode>[],
            ),
            OctopusNode(
              name: 'category',
              arguments: <String, String>{'id': 'electronics'},
              children: <OctopusNode>[],
            ),
            OctopusNode(
              name: 'category',
              arguments: <String, String>{'id': 'smartphones'},
              children: <OctopusNode>[],
            ),
            OctopusNode(
              name: 'product',
              arguments: <String, String>{'id': '3'},
              children: <OctopusNode>[],
            ),
          ],
        ),
        OctopusNode(
          name: 'basket-tab',
          arguments: <String, String>{},
          children: <OctopusNode>[
            OctopusNode(
              name: 'basket',
              arguments: <String, String>{},
              children: <OctopusNode>[],
            ),
            OctopusNode(
              name: 'checkout',
              arguments: <String, String>{},
              children: <OctopusNode>[],
            ),
          ],
        ),
      ],
    ),
  ],
);

Take a look closer. That's a tree structure. Each component of that tree has a List<OctopusNode> children for children nodes and arguments for the current node. States have arguments, too; it's your global arguments. Each node also has a name; by this name, you can identify this node and link it with your routes table.

If we try to represent this state as a location string, we get something like that: /home/shop/.catalog-tab/..catalog/..category~id=electronics/..category~id=smartphones/..product~id=3/.basket-tab/..basket/..checkout?shop=catalog