{"id":32611,"date":"2024-11-01T09:10:19","date_gmt":"2024-11-01T09:10:19","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32611"},"modified":"2024-11-01T11:54:36","modified_gmt":"2024-11-01T11:54:36","slug":"flutter-course-using-the-7-5-text-widget","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32611\/","title":{"rendered":"Flutter Course: Using the 7.5 Text Widget"},"content":{"rendered":"<p>Flutter is a UI toolkit developed by Google that helps create mobile, web, and desktop applications quickly and easily. In this tutorial, we will explore one of the most basic and important widgets in Flutter, the <strong>Text<\/strong> widget. The Text widget is used to display text in the app&#8217;s user interface and provides various styling options and functionalities.<\/p>\n<h2>1. Basic Usage of the Text Widget<\/h2>\n<p>The Text widget can be used very simply. In its most basic form, it can be used as follows:<\/p>\n<pre><code>Text('Hello, Flutter!')<\/code><\/pre>\n<p>The above code will display the text &#8220;Hello, Flutter!&#8221; on the screen. Below is an example of a simple screen using the Text widget:<\/p>\n<pre><code>import '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      home: Scaffold(\n        appBar: AppBar(\n          title: Text('Text Widget Example'),\n        ),\n        body: Center(\n          child: Text('Hello, Flutter!'),\n        ),\n      ),\n    );\n  }\n}<\/code><\/pre>\n<h2>2. Properties of the Text Widget<\/h2>\n<p>The Text widget provides various properties to adjust the text&#8217;s style and arrangement. The main properties are:<\/p>\n<ul>\n<li><strong>style<\/strong>: Used to specify the text style of the Text widget.<\/li>\n<li><strong>textAlign<\/strong>: Specifies the text alignment.<\/li>\n<li><strong>overflow<\/strong>: Determines how to handle text that is too long and exceeds the area.<\/li>\n<li><strong>maxLines<\/strong>: Specifies the maximum number of lines.<\/li>\n<li><strong>softWrap<\/strong>: Specifies whether to allow line breaks.<\/li>\n<\/ul>\n<h3>2.1 Specifying Text Style<\/h3>\n<p>The most commonly used method to set the style of the Text widget is by using the <code>TextStyle<\/code> class. The following example shows how to set the text size, color, and thickness:<\/p>\n<pre><code>Text(\n  'Hello, Flutter!',\n  style: TextStyle(\n    fontSize: 24,\n    color: Colors.blue,\n    fontWeight: FontWeight.bold,\n  ),\n)<\/code><\/pre>\n<h3>2.2 Text Alignment<\/h3>\n<p>Text alignment can be set using the <code>textAlign<\/code> property. The example below shows how to align the text to the center:<\/p>\n<pre><code>Text(\n  'Hello, Flutter!',\n  textAlign: TextAlign.center,\n)<\/code><\/pre>\n<h3>2.3 Text Overflow<\/h3>\n<p>If text exceeds the specified space, the <code>overflow<\/code> property can be used to specify how to handle it. For example, the following code displays &#8220;&#8230;&#8221; when the text overflows:<\/p>\n<pre><code>Text(\n  'Hello, Flutter! This text is too long and will overflow.',\n  overflow: TextOverflow.ellipsis,\n)<\/code><\/pre>\n<h2>3. Applying Various Text Styles<\/h2>\n<p>Flutter allows for the application of various text effects. Here are examples of different text styles:<\/p>\n<h3>3.1 Font Family<\/h3>\n<p>If you want to use a specific font, you can use the <code>fontFamily<\/code> property. For example:<\/p>\n<pre><code>Text(\n  'Hello, Flutter!',\n  style: TextStyle(\n    fontFamily: 'Serif',\n  ),\n)<\/code><\/pre>\n<h3>3.2 Text Shadow<\/h3>\n<p>You can add shadows to the text to create a three-dimensional effect. Below is an example of adding a shadow:<\/p>\n<pre><code>Text(\n  'Hello, Flutter!',\n  style: TextStyle(\n    shadows: [\n      Shadow(\n        color: Colors.black,\n        offset: Offset(2.0, 2.0),\n        blurRadius: 3.0,\n      ),\n    ],\n  ),\n)<\/code><\/pre>\n<h2>4. Using the RichText Widget<\/h2>\n<p>The Text widget is useful for displaying single-style text, but if you want to mix multiple styles, you can use the <strong>RichText<\/strong> widget. The RichText widget allows you to combine multiple <code>TextSpan<\/code> to apply various styles:<\/p>\n<pre><code>RichText(\n  text: TextSpan(\n    text: 'Hello, ',\n    style: TextStyle(color: Colors.black, fontSize: 20),\n    children: <TextSpan>[\n      TextSpan(text: 'Flutter!', style: TextStyle(fontWeight: FontWeight.bold)),\n    ],\n  ),\n)<\/code><\/pre>\n<h2>5. Applications of the Text Widget<\/h2>\n<p>The Text widget has various applications beyond basic text display. For example, you can create a dynamic UI that takes user input. Below is a simple example that receives user input:<\/p>\n<pre><code>class MyApp extends StatefulWidget {\n  @override\n  _MyAppState createState() => _MyAppState();\n}\n\nclass _MyAppState extends State<MyApp> {\n  String _inputText = '';\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: Text('Text Widget Application Example'),\n        ),\n        body: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            Text(_inputText),\n            TextField(\n              onChanged: (text) {\n                setState(() {\n                  _inputText = text;\n                });\n              },\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/pre>\n<h2>6. Supporting Multiple Languages<\/h2>\n<p>The Text widget supports multiple languages, making it easy to create multilingual apps. For example, to display text in a multilingual app, it is recommended to use the <code>Intl<\/code> package. Below is an example of multilingual support:<\/p>\n<pre><code>import 'package:intl\/intl.dart';\n\nString getGreeting(String languageCode) {\n  switch (languageCode) {\n    case 'en':\n      return 'Hello, Flutter!';\n    case 'ko':\n      return 'Hello, Flutter!';\n    default:\n      return 'Hello, Flutter!';\n  }\n}\n\n\/\/ Usage example\nText(getGreeting('ko')),<\/code><\/pre>\n<h2>7. Using the Text Widget for Optimal Performance<\/h2>\n<p>To maintain optimal performance while using the Text widget, various tips and strategies can be applied. For example, to avoid expensive styling work, you can use the <code>const<\/code> modifier to avoid unnecessary redraws instead of rebuilding the entire Text widget every time:<\/p>\n<pre><code>const Text(\n  'Hello, Flutter!',\n  style: TextStyle(fontSize: 24),\n),<\/code><\/pre>\n<h2>8. Conclusion<\/h2>\n<p>The Text widget is one of the fundamental elements in Flutter and is a powerful tool for displaying text in an app. In this tutorial, we have explored the basic usage of the Text widget, various styles, and application cases in detail. Think of various ways to provide a wonderful user experience with Flutter beyond just text display!<\/p>\n<p>In future tutorials, we will delve into more complex topics such as various text styles, animations, accessibility, and user interactions. Continue to explore the world of Flutter with us!<\/p>\n<p>Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is a UI toolkit developed by Google that helps create mobile, web, and desktop applications quickly and easily. In this tutorial, we will explore one of the most basic and important widgets in Flutter, the Text widget. The Text widget is used to display text in the app&#8217;s user interface and provides various styling &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32611\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Flutter Course: Using the 7.5 Text 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-32611","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: Using the 7.5 Text 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\/32611\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course: Using the 7.5 Text Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Flutter is a UI toolkit developed by Google that helps create mobile, web, and desktop applications quickly and easily. In this tutorial, we will explore one of the most basic and important widgets in Flutter, the Text widget. The Text widget is used to display text in the app&#8217;s user interface and provides various styling &hellip; \ub354 \ubcf4\uae30 &quot;Flutter Course: Using the 7.5 Text Widget&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32611\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:10:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:36+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\/32611\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32611\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course: Using the 7.5 Text Widget\",\"datePublished\":\"2024-11-01T09:10:19+00:00\",\"dateModified\":\"2024-11-01T11:54:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32611\/\"},\"wordCount\":577,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32611\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32611\/\",\"name\":\"Flutter Course: Using the 7.5 Text Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:10:19+00:00\",\"dateModified\":\"2024-11-01T11:54:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32611\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32611\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32611\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course: Using the 7.5 Text 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: Using the 7.5 Text 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\/32611\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course: Using the 7.5 Text Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Flutter is a UI toolkit developed by Google that helps create mobile, web, and desktop applications quickly and easily. In this tutorial, we will explore one of the most basic and important widgets in Flutter, the Text widget. The Text widget is used to display text in the app&#8217;s user interface and provides various styling &hellip; \ub354 \ubcf4\uae30 \"Flutter Course: Using the 7.5 Text Widget\"","og_url":"https:\/\/atmokpo.com\/w\/32611\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:10:19+00:00","article_modified_time":"2024-11-01T11:54:36+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\/32611\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32611\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course: Using the 7.5 Text Widget","datePublished":"2024-11-01T09:10:19+00:00","dateModified":"2024-11-01T11:54:36+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32611\/"},"wordCount":577,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32611\/","url":"https:\/\/atmokpo.com\/w\/32611\/","name":"Flutter Course: Using the 7.5 Text Widget - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:10:19+00:00","dateModified":"2024-11-01T11:54:36+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32611\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32611\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32611\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course: Using the 7.5 Text 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\/32611","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=32611"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32611\/revisions"}],"predecessor-version":[{"id":32612,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32611\/revisions\/32612"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}