TabBar enhancement

[sharjeelyunus]

I have 2 items in TabBar and for both of the items there is a different button at the footer, I want to get the selectedIndex property from the TabBar to conditionally render each button in the footer, right now selectedIndex always stays 0

See these buttons (Preview Post, Post), I want to show them in the footer, and for that I have to conditionally render each button with TabBar selectedIndex

[vinothvino42]

@sharjeelyunus Now I tested it and it looks like it's working fine. Try the following code

View:
  styles:
    useSafeArea: true
  body:
    Column:
      children:
        - TabBar:
            id: tabbarId
            styles:
              tabPadding: 10 20 0 20
              indicatorThickness: 4
              indicatorColor: green
              activeTabColor: blue
              tabBackgroundColor: white
              dividerColor: white
            items:
              - label: First Tab
                widget:
                  Column:
                    styles: { padding: 30, crossAxis: center }
                    children:
                      - Text:
                          text: First Tab content
                      - ContentView:
                          inputs:
                            selectedIndex: ${tabbarId.selectedIndex}
              - label: Second Tab
                widget:
                  Column:
                    styles: { padding: 30, crossAxis: center }
                    children:
                      - Text:
                          text: Second Tab content
                      - ContentView:
                          inputs:
                            selectedIndex: ${tabbarId.selectedIndex}

ContentView:
  inputs:
    - selectedIndex
  body:
    Column:
      styles: { gap: 30, crossAxis: center }
      children:
        - Text:
            text: Tab content ${selectedIndex}
        - Conditional:
            conditions:
              - if: ${selectedIndex == 0}
                Button:
                  label: Preview Post
                  onTap: |
                    //@code
                    console.log(tabbarId.selectedIndex);
              - else:
                Button:
                  label: Post
                  onTap: |
                    //@code
                    console.log(tabbarId.selectedIndex);

[sharjeelyunus]

I need to use these buttons/condition inside the footer (outside TabBar), inside the tab bar you don't even need conditions, you can just dynamically render 2 widgets for each item

see this here, even though I'm changing the item, the selectedIndex stays 0 in footer and always shows the Preview Post button:

View:
  styles:
    useSafeArea: true

  footer:
    styles:
      height: 100
      padding: 24
    children:
      - Column:
          styles:
            crossAxis: stretch
          children:
            - Conditional:
                conditions:
                  - if: ${tabbarId.selectedIndex == 0}
                    Button:
                      label: Preview Post
                  - else:
                    Button:
                      label: Post
  body:
    Column:
      children:
        - TabBar:
            id: tabbarId
            styles:
              tabPadding: 10 20 0 20
              indicatorThickness: 4
              indicatorColor: green
              activeTabColor: blue
              tabBackgroundColor: white
              dividerColor: white
            items:
              - label: First Tab
                widget:
                  Column:
                    styles: { padding: 30, crossAxis: center }
                    children:
                      - Text:
                          text: First Tab content
                      - ContentView:
                          inputs:
                            selectedIndex: ${tabbarId.selectedIndex}
              - label: Second Tab
                widget:
                  Column:
                    styles: { padding: 30, crossAxis: center }
                    children:
                      - Text:
                          text: Second Tab content
                      - ContentView:
                          inputs:
                            selectedIndex: ${tabbarId.selectedIndex}

ContentView:
  inputs:
    - selectedIndex
  body:
    Column:
      styles: { gap: 30, crossAxis: center }
      children:
        - Text:
            text: Tab content ${selectedIndex}
        - Conditional:
            conditions:
              - if: ${selectedIndex == 0}
                Button:
                  label: Preview Post
                  onTap: |
                    //@code
                    console.log(tabbarId.selectedIndex);
              - else:
                Button:
                  label: Post
                  onTap: |
                    //@code
                    console.log(tabbarId.selectedIndex);

[vinothvino42]

@vusters
Currently, we can't able to access any of the widget's properties with the widget id from the footer right?

View:
  styles:
    useSafeArea: true
  body:
    Column:
      children:
        - Text:
            id: myTextId
            text: Second

  footer:
    styles:
      height: 100
      padding: 24
    children:
      - Text:
          text: ${myTextId.text}

Do we need to create footer as an invokable widget in order to get other widget's properties?

OR

Can we create the whole page or page group widget as a invokable one?

[kmahmood74]

@vusters Vinoth is waiting for your comment for 6 weeks now

[vinothvino42]

@kmahmood74 Sneh is working on a similar issue I guess. Something related to the scopeManager issue.