{"id":17340,"date":"2020-08-14T14:42:00","date_gmt":"2020-08-14T14:42:00","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17340"},"modified":"2020-08-14T14:42:03","modified_gmt":"2020-08-14T14:42:03","slug":"everything-about-text-widget-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/everything-about-text-widget-in-flutter\/","title":{"rendered":"Everything about Text Widget in Flutter."},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">The first thing you need to know is that creating an app is all about creating small widgets, and compile them in one.<\/h4>\n\n\n\n<p>As if you know a bit about flutter then it&#8217;s usually known that everything in flutter is a widget, From a single line text to a dynamically changing content page everything considered as a widget, <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em> import\u00a0&#8216;package:flutter\/material.dart&#8217;;<\/em><\/p><\/blockquote>\n\n\n\n<p>So the first thing we all need to do is import the material package on top of our <strong>.dart<\/strong> file, Then the main function that hold our app function. After that using a class extends the <em>StatelessWidget<\/em> which is defined in our <strong>material.dart<\/strong> package.<\/p>\n\n\n\n<p>after that we call a Widget build function that is also defined in our package that takes two-parameter and return a widget where you can make many small widgets and work on them, We fist need to define the title and theme that accept a function called primarySwatch that is responsible for the theme color of the application. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"176\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/flutter.png\" alt=\"flutter title\" class=\"wp-image-17341\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/flutter.png 650w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/flutter-300x81.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><figcaption>Flutter Title<\/figcaption><\/figure>\n\n\n\n<p>After that, we add a home Scaffold widget that is responsible for the app bar or the top of the application that the content app bar and title on the app bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"124\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/home.png\" alt=\"home scaffold\" class=\"wp-image-17343\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/home.png 320w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/home-300x116.png 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><figcaption>Flutter Title<\/figcaption><\/figure>\n\n\n\n<p>Then after we create a body widget that accepts some parameters which are responsible for the body part of the application, where you need to create a child widget. then we will create a mainAxisAlignment and padding widget that helps your content to place in your screen resulution.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"478\" height=\"242\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text.png\" alt=\"text widget\" class=\"wp-image-17344\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text.png 478w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/text-300x152.png 300w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><figcaption>text widget<\/figcaption><\/figure>\n\n\n\n<p>That&#8217;s it at the end you need to Write some text in double quote and run the app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The first thing you need to know is that creating an app is all about creating small widgets, and compile them in one. As if you know a bit about flutter then it&#8217;s usually known that everything in flutter is a widget, From a single line text to a dynamically changing content page everything considered&#8230;<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[6331],"tags":[6203,6340,6339,6338],"class_list":["post-17340","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter","tag-material-dart","tag-text_widget","tag-widget"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17340"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17340\/revisions"}],"predecessor-version":[{"id":17345,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17340\/revisions\/17345"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}