{"id":3314,"date":"2019-07-09T01:42:38","date_gmt":"2019-07-09T01:42:38","guid":{"rendered":"https:\/\/spiceworksmyanmar.com\/blog\/?p=3314"},"modified":"2019-07-09T01:42:38","modified_gmt":"2019-07-09T01:42:38","slug":"basic-flutter-widget","status":"publish","type":"post","link":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/","title":{"rendered":"Basic Flutter Widget"},"content":{"rendered":"<p>Hi! I\u2019m Ye Htet Aung, working as a PHP Developer at Spiceworks Myanmar Co., Ltd. Today I would like to share about\u00a0 Basic Flutter Widget for Developers.<\/p>\n<ul>\n<li>About Basic Widget And Widgets code example<\/li>\n<\/ul>\n<ol>\n<li><b>Text<\/b>: The\u00a0Text\u00a0widget lets you create a run of styled text within your application.<\/li>\n<\/ol>\n<pre class=\"brush: plain; notranslate\" title=\"\">      \r\nimport 'package:flutter\/material.dart'; \r\nvoid main() { \r\n\trunApp( \r\n\tCenter( \r\n\tchild: Text( \r\n\t\t'Hello, world!',\r\n \t\t), \r\n\t    ), \r\n\t); \r\n}\r\n<\/pre>\n<p>2.<strong>Row,\u00a0Column<\/strong>: These flex widgets let you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. Its design is based on the web\u2019sflexbox layout model.<\/p>\n<pre class=\"brush: plain; notranslate\" title=\"\">      \r\nRow(\r\n children: [ \r\nExpanded( child: Text('Deliver features faster', textAlign: TextAlign.center), \r\n\t),\r\nExpanded( child: Text('Craft beautiful UIs', textAlign: \tTextAlign.center), \r\n\t),  \r\n     ],\r\n );\r\n\r\nColumn( \r\nchildren: [ \r\n   Text('We move under cover and we move as one'), \r\n  Text('Through the night, we have one shot to live another day'), \r\n  Text('We cannot let a stray gunshot give us away'), \r\n  Text('The code word is \u2018Rochambeau,\u2019 dig me?'), \r\n  Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)), ], )\r\n<\/pre>\n<p><strong>3.Container<\/strong>: The\u00a0 Container \u00a0widget lets you create a rectangular visual element. A container can be decorated with a\u00a0BoxDecoration, such as a background, a border, or a shadow. A\u00a0 Container can also have margins, padding, and constraints applied to its size. In addition, a\u00a0 Container can be transformed in three dimensional space using a matrix.<\/p>\n<pre class=\"brush: plain; notranslate\" title=\"\">      \r\nCenter( \r\n\tchild: Container( \r\n\tmargin: const EdgeInsets.all(10.0), \r\n\tcolor: const Color(0xFF00FF00),\r\n \twidth: 48.0, \r\n\theight: 48.0, \r\n\t),\r\n          )\r\n     )\r\n<\/pre>\n<p>4.<strong>CircleAvatar<\/strong>: Typically used with a user&#8217;s profile image, or, in the absence of such an image, the user&#8217;s initials. A given user&#8217;s initials should always be paired with the same background color, for consistency.<\/p>\n<pre class=\"brush: plain; notranslate\" title=\"\">      \r\nCircleAvatar(\r\n  backgroundImage: NetworkImage(userAvatarUrl),\r\n)\r\n<\/pre>\n<p>5.<strong>ListView<\/strong> : a column-like widget, automatically provides scrolling when its content is too long for its render box.<\/p>\n<pre class=\"brush: plain; notranslate\" title=\"\">      \r\nWidget _buildList() =&gt; ListView(\r\n      children: [\r\n        _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),\r\n        _tile('The Castro Theater', '429 Castro St', Icons.theaters),\r\n        _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),\r\n        _tile('Roxie Theater', '3117 16th St', Icons.theaters),\r\n        _tile('United Artists Stonestown Twin', '501 Buckingham Way',\r\n            Icons.theaters),\r\n        _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),\r\n        Divider(),\r\n        _tile('Kescaped_code#39;s Kitchen', '757 Monterey Blvd', Icons.restaurant),\r\n        _tile('Emmyescaped_code#39;s Restaurant', '1923 Ocean Ave', Icons.restaurant),\r\n        _tile(\r\n            'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),\r\n        _tile('La Ciccia', '291 30th St', Icons.restaurant),\r\n      ],\r\n    );\r\n\r\nListTile _tile(String title, String subtitle, IconData icon) =&gt; ListTile(\r\n      title: Text(title,\r\n          style: TextStyle(\r\n            fontWeight: FontWeight.w500,\r\n            fontSize: 20,\r\n          )),\r\n      subtitle: Text(subtitle),\r\n      leading: Icon(\r\n        icon,\r\n        color: Colors.blue[500],\r\n      ),\r\n    );\r\n\r\n<\/pre>\n<p>Use <strong>Stack<\/strong> to arrange widgets on top of a base widget\u2014often an image. The widgets can completely or partially overlap the base widget.<\/p>\n<pre class=\"brush: plain; notranslate\" title=\"\">      \r\nWidget _buildStack() =&gt; Stack(\r\n    alignment: const Alignment(0.6, 0.6),\r\n    children: [\r\n      CircleAvatar(\r\n        backgroundImage: AssetImage('images\/pic.jpg'),\r\n        radius: 100,\r\n      ),\r\n      Container(\r\n        decoration: BoxDecoration(\r\n          color: Colors.black45,\r\n        ),\r\n        child: Text(\r\n          'Mia B',\r\n          style: TextStyle(\r\n            fontSize: 20,\r\n            fontWeight: FontWeight.bold,\r\n            color: Colors.white,\r\n          ),\r\n        ),\r\n      ),\r\n    ],\r\n  );\r\n<\/pre>\n<p>I hope you will enjoy to read this post and next time I will share more interesting post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi! I\u2019m Ye Htet Aung, working as a PHP Developer at Spiceworks Myanmar Co., Ltd. Today I would like to<\/p>\n","protected":false},"author":29,"featured_media":3320,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-system"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Basic Flutter Widget - Web Development &amp; Tech Blog | Spiceworks Myanmar<\/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:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basic Flutter Widget - Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"og:description\" content=\"Hi! I\u2019m Ye Htet Aung, working as a PHP Developer at Spiceworks Myanmar Co., Ltd. Today I would like to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-09T01:42:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2019\/07\/cover_flutter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Spiceworks Myanmar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Spiceworks Myanmar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/\"},\"author\":{\"name\":\"Spiceworks Myanmar\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/1d6a9f621461e22a60a21d9ebf34bd86\"},\"headline\":\"Basic Flutter Widget\",\"datePublished\":\"2019-07-09T01:42:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/\"},\"wordCount\":233,\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/cover_flutter.png\",\"articleSection\":[\"System\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/\",\"name\":\"Basic Flutter Widget - Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/cover_flutter.png\",\"datePublished\":\"2019-07-09T01:42:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/1d6a9f621461e22a60a21d9ebf34bd86\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/cover_flutter.png\",\"contentUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/cover_flutter.png\",\"width\":700,\"height\":366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/basic-flutter-widget\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basic Flutter Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\",\"name\":\"Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"description\":\"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/1d6a9f621461e22a60a21d9ebf34bd86\",\"name\":\"Spiceworks Myanmar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g\",\"caption\":\"Spiceworks Myanmar\"},\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/author\\\/spiceworks-myanmar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basic Flutter Widget - Web Development &amp; Tech Blog | Spiceworks Myanmar","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:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/","og_locale":"en_US","og_type":"article","og_title":"Basic Flutter Widget - Web Development &amp; Tech Blog | Spiceworks Myanmar","og_description":"Hi! I\u2019m Ye Htet Aung, working as a PHP Developer at Spiceworks Myanmar Co., Ltd. Today I would like to","og_url":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/","og_site_name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","article_published_time":"2019-07-09T01:42:38+00:00","og_image":[{"width":700,"height":366,"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2019\/07\/cover_flutter.png","type":"image\/png"}],"author":"Spiceworks Myanmar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Spiceworks Myanmar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#article","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/"},"author":{"name":"Spiceworks Myanmar","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/1d6a9f621461e22a60a21d9ebf34bd86"},"headline":"Basic Flutter Widget","datePublished":"2019-07-09T01:42:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/"},"wordCount":233,"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2019\/07\/cover_flutter.png","articleSection":["System"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/","name":"Basic Flutter Widget - Web Development &amp; Tech Blog | Spiceworks Myanmar","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#primaryimage"},"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2019\/07\/cover_flutter.png","datePublished":"2019-07-09T01:42:38+00:00","author":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/1d6a9f621461e22a60a21d9ebf34bd86"},"breadcrumb":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#primaryimage","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2019\/07\/cover_flutter.png","contentUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2019\/07\/cover_flutter.png","width":700,"height":366},{"@type":"BreadcrumbList","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/basic-flutter-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.spiceworksmyanmar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Basic Flutter Widget"}]},{"@type":"WebSite","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/","name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","description":"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spiceworksmyanmar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/1d6a9f621461e22a60a21d9ebf34bd86","name":"Spiceworks Myanmar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de75beb6a85e1e4d704a6c2ae4fc5ce6e481e8943bb693c8638c80f1ea551e1d?s=96&d=mm&r=g","caption":"Spiceworks Myanmar"},"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/author\/spiceworks-myanmar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/3314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/comments?post=3314"}],"version-history":[{"count":6,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/3314\/revisions"}],"predecessor-version":[{"id":3353,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/3314\/revisions\/3353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media\/3320"}],"wp:attachment":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media?parent=3314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/categories?post=3314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/tags?post=3314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}