{"id":32513,"date":"2024-11-01T09:09:40","date_gmt":"2024-11-01T09:09:40","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32513"},"modified":"2024-11-01T11:54:59","modified_gmt":"2024-11-01T11:54:59","slug":"flutter-course-adding-a-loading-indicator-in-15-10","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32513\/","title":{"rendered":"Flutter Course: Adding a Loading Indicator in 15.10"},"content":{"rendered":"<p>\n    Flutter is an open-source UI software development kit (SDK) developed by Google, supporting the creation of high-performance applications across various platforms, including mobile, web, and desktop apps. Flutter comes with many features that allow for rapid building and deployment of entire applications. In this tutorial, we will explain how to add a loading indicator to a Flutter application. Loading indicators are important elements that visually signal to users that a task is in progress, significantly enhancing the user experience.\n<\/p>\n<h2>1. What is a Loading Indicator?<\/h2>\n<p>\n    A loading indicator is a UI element that signals to users that data is being loaded. It helps users understand the responsiveness of the app and alleviates concerns about potential delays. Flutter offers various loading indicators such as:\n<\/p>\n<ul>\n<li>LinearProgressIndicator: Horizontal progress bar<\/li>\n<li>CircularProgressIndicator: Circular progress bar<\/li>\n<li>Custom loading indicators: Can be customized utilizing Flutter&#8217;s flexibility<\/li>\n<\/ul>\n<h2>2. Project Setup<\/h2>\n<p>\n    To add a loading indicator, an existing Flutter project is required. To create a new Flutter project, run the following command to generate the basic project structure.\n<\/p>\n<pre><code>flutter create loading_indicator_example<\/code><\/pre>\n<p>\n    Navigate to the created project directory and open the project using an IDE (e.g., Visual Studio Code).\n<\/p>\n<pre><code>cd loading_indicator_example<\/code><\/pre>\n<h2>3. Adding a Loading Indicator<\/h2>\n<p>\n    To add a loading indicator, we first need to define the user interface (UI). The following code is an example that uses CircularProgressIndicator and LinearProgressIndicator.\n<\/p>\n<pre><code>\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Loading Indicator Example',\n      home: LoadingIndicatorDemo(),\n    );\n  }\n}\n\nclass LoadingIndicatorDemo extends StatefulWidget {\n  @override\n  _LoadingIndicatorDemoState createState() => _LoadingIndicatorDemoState();\n}\n\nclass _LoadingIndicatorDemoState extends State<loadingindicatordemo> {\n  bool _isLoading = false;\n\n  void _fetchData() async {\n    setState(() {\n      _isLoading = true;\n    });\n\n    \/\/ Simulate a network request\n    await Future.delayed(Duration(seconds: 3));\n\n    setState(() {\n      _isLoading = false;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Loading Indicator Example'),\n      ),\n      body: Center(\n        child: _isLoading \n            ? CircularProgressIndicator() \n            : ElevatedButton(\n                onPressed: _fetchData, \n                child: Text('Fetch Data'),\n              ),\n      ),\n    );\n  }\n}\n<\/loadingindicatordemo><\/code><\/pre>\n<p>\n    The above code uses CircularProgressIndicator to show the loading state to the user. When the button is clicked, the <code>_fetchData<\/code> function is called, which waits for 3 seconds before hiding the loading indicator.\n<\/p>\n<h2>4. Adding a LinearProgressIndicator<\/h2>\n<p>\n    You can implement the same way to show the loading state using LinearProgressIndicator. To change the layout, simply modify the code.\n<\/p>\n<pre><code>\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Loading Indicator Example',\n      home: LoadingIndicatorDemo(),\n    );\n  }\n}\n\nclass LoadingIndicatorDemo extends StatefulWidget {\n  @override\n  _LoadingIndicatorDemoState createState() => _LoadingIndicatorDemoState();\n}\n\nclass _LoadingIndicatorDemoState extends State<loadingindicatordemo> {\n  bool _isLoading = false;\n\n  void _fetchData() async {\n    setState(() {\n      _isLoading = true;\n    });\n\n    await Future.delayed(Duration(seconds: 3));\n\n    setState(() {\n      _isLoading = false;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Loading Indicator Example'),\n      ),\n      body: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        children: [\n          _isLoading \n                ? LinearProgressIndicator() \n                : ElevatedButton(\n                    onPressed: _fetchData, \n                    child: Text('Fetch Data'),\n                  ),\n        ],\n      )\n    );\n  }\n}\n<\/loadingindicatordemo><\/code><\/pre>\n<h2>5. Customizing Loading Indicators<\/h2>\n<p>\n    You can customize the default loading indicators provided by Flutter to create a more unique and appealing UI. The following is an example of customization by adjusting color, size, and shape.\n<\/p>\n<pre><code>\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Customized Loading Indicator Example',\n      home: LoadingIndicatorDemo(),\n    );\n  }\n}\n\nclass LoadingIndicatorDemo extends StatefulWidget {\n  @override\n  _LoadingIndicatorDemoState createState() => _LoadingIndicatorDemoState();\n}\n\nclass _LoadingIndicatorDemoState extends State<loadingindicatordemo> {\n  bool _isLoading = false;\n\n  void _fetchData() async {\n    setState(() {\n      _isLoading = true;\n    });\n\n    await Future.delayed(Duration(seconds: 3));\n\n    setState(() {\n      _isLoading = false;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Customized Loading Indicator Example'),\n      ),\n      body: Center(\n        child: _isLoading \n          ? CircularProgressIndicator(\n              valueColor: AlwaysStoppedAnimation<Color>(Colors.green),\n              strokeWidth: 10.0,\n            ) \n          : ElevatedButton(\n              onPressed: _fetchData, \n              child: Text('Fetch Data'),\n            ),\n      ),\n    );\n  }\n}\n<\/color><\/loadingindicatordemo><\/code><\/pre>\n<h2>6. Conclusion<\/h2>\n<p>\n    Loading indicators are important elements that improve the user experience and maintain the identity of the application. With Flutter, you can easily add loading indicators and customize them as needed. We hope this tutorial helps you successfully add loading indicators to your Flutter applications.\n<\/p>\n<h2>7. Additional Resources<\/h2>\n<p>\n    For more information about loading indicators, please refer to the official Flutter documentation or community forums. They contain various examples and tips that will be useful for troubleshooting.\n<\/p>\n<p>Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is an open-source UI software development kit (SDK) developed by Google, supporting the creation of high-performance applications across various platforms, including mobile, web, and desktop apps. Flutter comes with many features that allow for rapid building and deployment of entire applications. In this tutorial, we will explain how to add a loading indicator to &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32513\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course: Adding a Loading Indicator in 15.10&#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-32513","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: Adding a Loading Indicator in 15.10 - \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\/32513\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course: Adding a Loading Indicator in 15.10 - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Flutter is an open-source UI software development kit (SDK) developed by Google, supporting the creation of high-performance applications across various platforms, including mobile, web, and desktop apps. Flutter comes with many features that allow for rapid building and deployment of entire applications. In this tutorial, we will explain how to add a loading indicator to &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course: Adding a Loading Indicator in 15.10&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32513\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:09:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:59+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=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32513\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32513\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course: Adding a Loading Indicator in 15.10\",\"datePublished\":\"2024-11-01T09:09:40+00:00\",\"dateModified\":\"2024-11-01T11:54:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32513\/\"},\"wordCount\":389,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32513\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32513\/\",\"name\":\"Flutter Course: Adding a Loading Indicator in 15.10 - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:09:40+00:00\",\"dateModified\":\"2024-11-01T11:54:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32513\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32513\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32513\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course: Adding a Loading Indicator in 15.10\"}]},{\"@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: Adding a Loading Indicator in 15.10 - \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\/32513\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course: Adding a Loading Indicator in 15.10 - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Flutter is an open-source UI software development kit (SDK) developed by Google, supporting the creation of high-performance applications across various platforms, including mobile, web, and desktop apps. Flutter comes with many features that allow for rapid building and deployment of entire applications. In this tutorial, we will explain how to add a loading indicator to &hellip; \ub354 \ubcf4\uae30 \"Flutter Course: Adding a Loading Indicator in 15.10\"","og_url":"https:\/\/atmokpo.com\/w\/32513\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:09:40+00:00","article_modified_time":"2024-11-01T11:54:59+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":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32513\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32513\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course: Adding a Loading Indicator in 15.10","datePublished":"2024-11-01T09:09:40+00:00","dateModified":"2024-11-01T11:54:59+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32513\/"},"wordCount":389,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32513\/","url":"https:\/\/atmokpo.com\/w\/32513\/","name":"Flutter Course: Adding a Loading Indicator in 15.10 - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:09:40+00:00","dateModified":"2024-11-01T11:54:59+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32513\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32513\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32513\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course: Adding a Loading Indicator in 15.10"}]},{"@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\/32513","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=32513"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32513\/revisions"}],"predecessor-version":[{"id":32514,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32513\/revisions\/32514"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}