Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding Avatar To Your Project
  • Avatar Widget Properties
  • 1. Avatar Box Shape
  • 2. Radius(only circle)
  • 3. Image Source
  • 4. Box Fit
  • 5. Background Color
  • 6. Text
  1. BUILDING UI
  2. Widgets
  3. Base Widgets

Avatar

PreviousTextNextRich Text

Last updated 1 year ago

Adding Avatar To Your Project

  1. Click on Add Widget Button and Select the Avatar widget from the list or add it directly from the widget tree.

Avatar Widget Properties

1. Avatar Box Shape

In the Avatar widget, the shape property allows the selection between a circular or square shape for the box surrounding the avatar image.

2. Radius(only circle)

The radius property in the Avatar widget enables the specification of the circle's radius.

3. Image Source

In the image source property of the Avatar widget, we input the image URL when extracting it from a network, or alternatively, we utilize images stored in the assets. Initially, we add the image to the assets.

4. Box Fit

  1. None: It positions the child at the center of the parent by default and removes any parts of the child that extend beyond the parent's boundaries.

  2. Fill: The child completely occupies the parent's box, but this might cause the child's original shape to change.

  3. Contain: It adjusts its child to occupy as much space as it can within the parent widget's boundaries without going beyond them.

  4. Cover: It minimizes the child's size to fit within the parent widget's boundaries while ensuring that the child remains completely covered.

  5. Fit Height : It ensures that the child occupies the entire height of the parent, allowing the child to extend beyond the parent's boundaries horizontally, while still preserving its original shape.

  6. Fit Width: It ensures that the child occupies the entire width of the parent, allowing the child to extend beyond the parent's boundaries vertically, while still preserving its original shape.

  7. Scale Down: It overrides the property that we set or scale down the properties.

5. Background Color

6. Text

The is used to show text on the screen. It is one of the most frequently used widgets.

Text widget