Tips & Tricks
Profile Picture Item

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

Alt text Alt text Note: Its only specific item code, so as to stay relevant to our topic. You can see complete example here (opens in a new tab)

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
Tips & TricksMutations