Ensemble

Profile Picture

Its possible that you might need to have your profile picture as item to navigate to settings page or profile page etc, anyway whichever is your case here is how can do it with EnsembleUI.

Example


ViewGroup:
    BottomNavBar:
        - customItem:
          widget: CustomNavBarItemWithImage
          selectedWidget: ActiveCustomNavBarItemWithImage
        page: WeeklyScheduler

Output

Note: Its only specific item code, so as to stay relevant to our topic. You can see complete example here

CustomNavBarItemWithImage


CustomNavBarItemWithImage:
  body:
    Column:
      styles:
        padding: 2 8
      children:
        - Image:
            source: https://robohash.org/hicveldicta.png
            styles:
              width: 40
              height: 40
              borderRadius: 40
              borderWidth: 2
              borderColor: 0xFFDEDEDE

ActiveCustomNavBarItemWithImage


ActiveCustomNavBarItemWithImage:
  body:
    Column:
      styles:
        padding: 2 8
      children:
        - Image:
            source: https://robohash.org/hicveldicta.png
            styles:
              width: 40
              height: 40
              borderRadius: 40
              borderWidth: 2
              borderColor: black