{"id":32617,"date":"2024-11-01T09:10:22","date_gmt":"2024-11-01T09:10:22","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32617"},"modified":"2024-11-01T11:54:34","modified_gmt":"2024-11-01T11:54:34","slug":"flutter-course-7-8-using-circleavatar-widget","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32617\/","title":{"rendered":"Flutter Course, 7.8 Using CircleAvatar Widget"},"content":{"rendered":"<p>Hello! Today, we will learn about the <strong>CircleAvatar<\/strong> widget, which is one of the user interface (UI) components in Flutter. In this tutorial, we will detail the basic concepts of the CircleAvatar widget, various usage examples, and how to customize it. Learn how to enhance the user experience of your app using the CircleAvatar widget.<\/p>\n<h2>1. What is CircleAvatar?<\/h2>\n<p>CircleAvatar is a widget that is commonly used to display profile pictures or user avatars, having a circular shape. This widget can show various contents such as images, icons, and text in a circular format. The CircleAvatar widget is a very useful element for implementing various designs in user interfaces.<\/p>\n<h3>1.1 Basic Usage of CircleAvatar<\/h3>\n<p>To use the CircleAvatar widget, you can follow this basic format:<\/p>\n<pre><code>CircleAvatar(\n  radius: 30.0,\n  backgroundImage: NetworkImage(\"https:\/\/example.com\/image.png\"),\n)<\/code><\/pre>\n<p>In the code above, <code>radius<\/code> sets the radius of the avatar, and <code>backgroundImage<\/code> specifies the image to be displayed inside the circle. This allows for a simple creation of a circular avatar.<\/p>\n<h2>2. Description of CircleAvatar Properties<\/h2>\n<p>The CircleAvatar widget provides various properties that enable customized designs. The main properties are as follows:<\/p>\n<ul>\n<li><strong>backgroundColor<\/strong>: Sets the background color of the avatar. You can specify the color to display when the image is not loaded.<\/li>\n<li><strong>backgroundImage<\/strong>: Sets the image to be displayed on the avatar. You can use either <code>NetworkImage<\/code> or <code>AssetImage<\/code>.<\/li>\n<li><strong>radius<\/strong>: Sets the radius of the avatar. The default value is 20.<\/li>\n<li><strong>child<\/strong>: This is a widget that can be added inside the avatar. It is typically used to add text or icons.<\/li>\n<\/ul>\n<h3>2.1 Example of CircleAvatar Properties<\/h3>\n<pre><code>CircleAvatar(\n  radius: 50,\n  backgroundColor: Colors.blue,\n  child: Text(\"A\", style: TextStyle(color: Colors.white, fontSize: 24),),\n)<\/code><\/pre>\n<p>The above example creates a circular avatar with a blue background color and displays the text \u2018A\u2019 in white. This example illustrates how to create a CircleAvatar widget that includes text.<\/p>\n<h2>3. Various Usage Examples of CircleAvatar<\/h2>\n<p>The CircleAvatar widget can be used for various purposes beyond representing a profile picture. Below are some usage examples.<\/p>\n<h3>3.1 User Profile Image<\/h3>\n<p>CircleAvatar is often used to display user profile images in social media apps. Here is an example of loading a profile image:<\/p>\n<pre><code>CircleAvatar(\n  radius: 40,\n  backgroundImage: NetworkImage(\"https:\/\/example.com\/user_profile.jpg\"),\n)<\/code><\/pre>\n<h3>3.2 Color-Based Avatar<\/h3>\n<p>It is also nice to create avatars that can be identified by color based on specific users or categories. For example, it can be implemented in the following format:<\/p>\n<pre><code>CircleAvatar(\n  radius: 30,\n  backgroundColor: Colors.red,\n  child: Text(\"U\", style: TextStyle(color: Colors.white)),\n)<\/code><\/pre>\n<h3>3.3 Alternative Image<\/h3>\n<p>If loading an image from the network is not possible, it is also possible to provide an alternative image. In this case, the <code>backgroundColor<\/code> property can be utilized to set the background color of the avatar. This can be implemented in the following manner:<\/p>\n<pre><code>CircleAvatar(\n  radius: 30,\n  backgroundColor: Colors.grey,\n  child: Icon(Icons.person, color: Colors.white),\n)<\/code><\/pre>\n<h2>4. Customizing CircleAvatar<\/h2>\n<p>To make CircleAvatar more unique, you can combine its properties appropriately to apply your own style. Below are some tips for customizing CircleAvatar:<\/p>\n<h3>4.1 Adding a Border<\/h3>\n<p>If you want to add a border to CircleAvatar, you can wrap the CircleAvatar with a <code>Container<\/code> widget. Here is an example of a CircleAvatar with a border:<\/p>\n<pre><code>Container(\n  decoration: BoxDecoration(\n    shape: BoxShape.circle,\n    border: Border.all(\n      width: 2.0,\n      color: Colors.blue,\n    ),\n  ),\n  child: CircleAvatar(\n    radius: 40,\n    backgroundImage: NetworkImage(\"https:\/\/example.com\/image.jpg\"),\n  ),\n)<\/code><\/pre>\n<h3>4.2 Changing Size<\/h3>\n<p>You can use different radius values to have avatars of various sizes. By adjusting the radius, you can dynamically change the size of the avatar.<\/p>\n<h3>4.3 Combining Text and Icons<\/h3>\n<p>It is also possible to combine text and icons inside CircleAvatar. This can be implemented in the following manner:<\/p>\n<pre><code>CircleAvatar(\n  radius: 40,\n  backgroundColor: Colors.green,\n  child: Row(\n    mainAxisSize: MainAxisSize.min,\n    children: [\n      Icon(Icons.person, color: Colors.white),\n      SizedBox(width: 5),\n      Text(\"User\", style: TextStyle(color: Colors.white)),\n    ],\n  ),\n)<\/code><\/pre>\n<h2>5. Using CircleAvatar with ListView<\/h2>\n<p>It is possible to dynamically display multiple avatars by combining the CircleAvatar widget with ListView. Here is an example of using ListView to display multiple avatars:<\/p>\n<pre><code>ListView.builder(\n  itemCount: 10,\n  itemBuilder: (context, index) {\n    return ListTile(\n      leading: CircleAvatar(\n        radius: 30,\n        backgroundImage: NetworkImage(\"https:\/\/example.com\/user_$index.jpg\"),\n      ),\n      title: Text(\"User $index\"),\n    );\n  },\n)<\/code><\/pre>\n<h2>6. Considerations When Using CircleAvatar<\/h2>\n<p>When using CircleAvatar, consider the following points:<\/p>\n<ul>\n<li>When selecting images, it is important to choose the appropriate size and format to reduce load time.<\/li>\n<li>When using network images, logic to handle loading errors is also necessary.<\/li>\n<li>Colors and sizes should be adjusted to harmonize with the UI design.<\/li>\n<\/ul>\n<h2>7. Conclusion<\/h2>\n<p>In this post, we learned about various ways of using and customizing the CircleAvatar widget in Flutter. CircleAvatar is a simple yet powerful UI element. By utilizing it, you can provide a strong user experience in various apps. Try implementing CircleAvatar yourself and make your app more attractive with your own style!<\/p>\n<p>Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello! Today, we will learn about the CircleAvatar widget, which is one of the user interface (UI) components in Flutter. In this tutorial, we will detail the basic concepts of the CircleAvatar widget, various usage examples, and how to customize it. Learn how to enhance the user experience of your app using the CircleAvatar widget. &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32617\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course, 7.8 Using CircleAvatar Widget&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[151],"tags":[],"class_list":["post-32617","post","type-post","status-publish","format-standard","hentry","category-flutter-course"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter Course, 7.8 Using CircleAvatar Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32617\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course, 7.8 Using CircleAvatar Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Hello! Today, we will learn about the CircleAvatar widget, which is one of the user interface (UI) components in Flutter. In this tutorial, we will detail the basic concepts of the CircleAvatar widget, various usage examples, and how to customize it. Learn how to enhance the user experience of your app using the CircleAvatar widget. &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course, 7.8 Using CircleAvatar Widget&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32617\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:10:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:34+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32617\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32617\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course, 7.8 Using CircleAvatar Widget\",\"datePublished\":\"2024-11-01T09:10:22+00:00\",\"dateModified\":\"2024-11-01T11:54:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32617\/\"},\"wordCount\":648,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32617\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32617\/\",\"name\":\"Flutter Course, 7.8 Using CircleAvatar Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:10:22+00:00\",\"dateModified\":\"2024-11-01T11:54:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32617\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32617\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32617\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course, 7.8 Using CircleAvatar Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter Course, 7.8 Using CircleAvatar Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32617\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course, 7.8 Using CircleAvatar Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Hello! Today, we will learn about the CircleAvatar widget, which is one of the user interface (UI) components in Flutter. In this tutorial, we will detail the basic concepts of the CircleAvatar widget, various usage examples, and how to customize it. Learn how to enhance the user experience of your app using the CircleAvatar widget. &hellip; \ub354 \ubcf4\uae30 \"Flutter Course, 7.8 Using CircleAvatar Widget\"","og_url":"https:\/\/atmokpo.com\/w\/32617\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:10:22+00:00","article_modified_time":"2024-11-01T11:54:34+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32617\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32617\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course, 7.8 Using CircleAvatar Widget","datePublished":"2024-11-01T09:10:22+00:00","dateModified":"2024-11-01T11:54:34+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32617\/"},"wordCount":648,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32617\/","url":"https:\/\/atmokpo.com\/w\/32617\/","name":"Flutter Course, 7.8 Using CircleAvatar Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:10:22+00:00","dateModified":"2024-11-01T11:54:34+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32617\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32617\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32617\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course, 7.8 Using CircleAvatar Widget"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32617"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32617\/revisions"}],"predecessor-version":[{"id":32618,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32617\/revisions\/32618"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}