{"id":7075,"date":"2020-11-06T09:11:00","date_gmt":"2020-11-06T12:11:00","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=7075"},"modified":"2024-09-24T18:00:19","modified_gmt":"2024-09-24T21:00:19","slug":"introducao-ao-flutter-o-framework-do-google","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/introducao-ao-flutter-o-framework-do-google\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Flutter, o framework da Google"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Segundo o Google, Flutter \u00e9 um UI toolkit do Google para criar aplicativos bonitos e nativos compilados para dispositivos m\u00f3veis, Web e desktop a partir de uma \u00fanica base de c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos detalhar um pouco mais essa parada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-o-que-o-flutter\">O que \u00e9 o Flutter?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/o-que-e-o-flutter-1024x576.jpg\" alt=\"fundo roxo simbolo da geek hunter e do flutter\" class=\"wp-image-7718\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que voc\u00ea seja  \u2014  se j\u00e1 n\u00e3o \u00e9  \u2014  um desenvolvedor <em>iOS<\/em> e criou um app muito legal que, ao inv\u00e9s de dar<em> matc<\/em>h com outras pessoas, d\u00e1 <em>match <\/em>com comidas que voc\u00ea deve experimentar. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hummm\u2026 Puts, que legal isso cara, um app super popular! Mas tem um problema. Sheeeiiit (ebonics &#8211; <strong>Google<\/strong> it!). S\u00f3 roda no<strong> iOS<\/strong>. E todos os dias as pessoas perguntam quando ser\u00e1 lan\u00e7ado a vers\u00e3o para <strong>Android<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Ent\u00e3o voc\u00ea, de saco cheio de tanta perturba\u00e7\u00e3o (sei bem como \u00e9 isso), decide comprar uns livros de<a rel=\"noreferrer noopener\" aria-label=\" Java (abre numa nova aba)\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/o-java-ainda-faz-historia\/\" target=\"_blank\"> <\/a><strong><a rel=\"noreferrer noopener\" aria-label=\" Java (abre numa nova aba)\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/o-java-ainda-faz-historia\/\" target=\"_blank\">Java<\/a><\/strong> e estudar desenvolvimento de apps <em>Android<\/em>. <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Sheeeeeiiitt! Depois de um bom e longo tempo, seu app est\u00e1 dispon\u00edvel para download em ambos:<em> Google Play e App Store<\/em>. Muito bom para os usu\u00e1rios, l\u00f3gico. Mas para voc\u00ea que vai manter e atualizar o c\u00f3digo, pode se tornar um pesadelo. <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Ser\u00e1 necess\u00e1rio escrever duas vers\u00f5es de c\u00f3digos para corrigir bugs, features e por a\u00ed vai.  E s\u00f3 ent\u00e3o subir para as lojinhas do <strong>Google <\/strong>e <strong>Apple<\/strong>. <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">E isso n\u00e3o \u00e9 tudo. <\/span><span style=\"font-weight: 400;\">Imagine seus usu\u00e1rios reclamando do tamanho de um bot\u00e3o que parece legal em um tamanho de tela e em outro n\u00e3o!? <\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400;\">Existem muitos tamanhos de telas, aparelhos de diversos tamanhos, <strong>iPhones<\/strong> antigos, tantas variedades de aparelhos rodando<em> <\/em><strong>Android<\/strong>&#8230; Fica extremamente dif\u00edcil criar um design bacana para seu app que atenda a todos.&nbsp;<\/span><strong>Exatamente aqui entra o<\/strong><em><strong> Flutter<\/strong><\/em><strong>!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quer entender um pouco sobre o <em>hype<\/em> que envolve o Flutter, confira o v\u00eddeo:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Flutter: qual o motivo deste HYPE? (feat Flutterando)\" width=\"1140\" height=\"641\" src=\"https:\/\/www.youtube.com\/embed\/UpFijg9XFOU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Oportunidades para <a href=\"https:\/\/bit.ly\/3rouj4l\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>pessoa desenvolvedora mobile<\/strong><\/a>: encontre a sua!<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-o-diferencial-do-flutter\">O diferencial do Flutter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cada vez mais surgem telas, por toda parte. Temos telas em geladeiras, pontos de \u00f4nibus, at\u00e9 mesmo espelhos e com diferentes propor\u00e7\u00f5es e tamanhos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por que n\u00e3o criar<strong> uma maneira inteligente e f\u00e1cil<\/strong> permitindo que <em>developers<\/em> construam um design para seus<em> apps<\/em> em todas essas maravilhosas telas?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente o que <strong>Flutter<\/strong> \u00e9: Um simples<em> toolkit <\/em>que permite que <em>developers<\/em> criem bonitos <em>designs <\/em>para toda uma variedade de telas e aparelhos. Cool!&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Flutter<\/strong> possui uma por\u00e7\u00e3o de <em>widgets<\/em> que nos permite criar o <em>layout do app<\/em> muito facilmente. Muitos deles vieram dos conceitos de <em>web design<\/em> onde podemos ter os elementos centralizados ou termos <em>paddings<\/em> e<em> margins<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E que tal usar tudo isso para criar o<em> design<\/em> e desenvolver para quase todos os aparelhos existentes no mercado?&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ok-mas-como-funciona\">Ok.. Mas como funciona?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 isso a\u00ed. Imagine os <em>widgets<\/em> como<strong> blocos de lego a serem montados<\/strong>. \u00c9 exatamente como <strong>Flutter <\/strong>funciona, temos acesso a todos os <em>widget<\/em>s e os montamos como lego. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conectando estes blocos de lego, podemos customizar e criar um bonito app e realizar <em>deploy<\/em> em quase todos os lugares. Desenvolveremos um <em>app<\/em> aplicando tudo isso e mais.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E a melhor parte: realizar <em>deploy<\/em> do nosso app em diferentes aparelhos e plataformas sem reescrever o c\u00f3digo ou aprender uma nova tecnologia\/linguagem de programa\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>>>Leitura Recomendada:<\/strong><br><strong><a href=\"https:\/\/www.geekhunter.com\/pt\/blog\/programacao-mobile-tudo-para-comecar-hoje\/\" target=\"_blank\" rel=\"noreferrer noopener\">Programa\u00e7\u00e3o Mobile<\/a><\/strong>: tudo para come\u00e7ar hoje!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-por-que-escolher-o-flutter\"><strong>Por que escolher o Flutter?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/por-que-escolher-o-flutter-1024x576.jpg\" alt=\"por que escolher o flutter\" class=\"wp-image-7719\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ent\u00e3o voc\u00ea vai come\u00e7ar um projeto e quer saber se realmente deve usar <strong>Flutter<\/strong>. As primeiras coisas a se pensar s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Apenas um c\u00f3digo para manter.<em> Cool<\/em>!<\/li><li>Apenas um local para <em>debugar<\/em>.<\/li><li>Apenas um local para realizar seus <em>updates<\/em>.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ou seja, apenas um c\u00f3digo que dita todas as regras! Coooooool!!!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa \u00e9 a uma grande vantagem comparando com cria\u00e7\u00f5es de apps nativos para<em> iOS<\/em> com<strong> Swift,<\/strong> criando <em>apps<\/em> para <em>Android<\/em> com<strong> Java<\/strong>, <em>WebApps<\/em> em <em>JavaScript<\/em> e precisando atualizar e manter todos estes c\u00f3digos\u2026 Grande chance de virar uma bagun\u00e7a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-linguagem-dart\">A linguagem Dart<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Com<strong> Flutte<\/strong>r, a \u00fanica linguagem que precisa saber \u00e9 <strong>Dart <\/strong>(muitos aqui lembram do <em>Lord Sith Darth Vader<\/em> hehe), uma poderosa e f\u00e1cil linguagem para se trabalhar, se voc\u00ea conhece <strong>orienta\u00e7\u00e3o a objetos<\/strong> e j\u00e1 programou com outra linguagem antes. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ela \u00e9 utilizada dentro do <strong>Google<\/strong> para projetos como<em> adWords<\/em> e <em>Google Fiber <\/em>e s\u00f3 vem crescendo. Atualmente, podemos utilizar <strong>Flutter<\/strong> para criar aplica\u00e7\u00f5es<em> iOS, Web, Desktop e Android. <\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas cuidado, as vers\u00f5es para Web e Desktop ainda n\u00e3o parecem muito est\u00e1veis. Ent\u00e3o fa\u00e7a alguns testes antes de mais nada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-o-ios-e-o-flutter\">O iOS e o Flutter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Se isso n\u00e3o \u00e9 tudo e voc\u00ea trampa com desenvolvimento <strong>iOS nativo<\/strong>, sabe que o carregamento de uma altera\u00e7\u00e3o feita no c\u00f3digo depois de clicar em <em>save<\/em>, rodar, compilar e finalmente ter a altera\u00e7\u00e3o exibida na tela, demora um tempinho. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No <strong>Flutter<\/strong> isso acontece rapid\u00e3o, na hora mesmo, com o<em> Hot Reloa<\/em>d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Last but not least:<\/strong> a \u00faltima coisa que voc\u00ea precisa saber \u00e9 que quando estamos trabalhando com <strong>Flutter<\/strong>, temos acesso ao c\u00f3digo fonte original.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso significa que, se voc\u00ea quiser saber  \u2014  por exemplo  \u2014  como um bot\u00e3o \u00e9 implementado, \u00e9 poss\u00edvel clicar no c\u00f3digo dele e ver como os caras do <strong>Google<\/strong> escreveram o c\u00f3digo e at\u00e9 mesmo alterar para o jeito que voc\u00ea preferir. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Devo mencionar que l\u00e1 no<em> iOS<\/em> as coisas s\u00e3o uma <em>black box<\/em>? O c\u00f3digo da Apple e como eles implementam \u00e9 um segredo deles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">BTW  \u2014  <strong>Apple<\/strong> \u00e9 uma empresa que admiro, seus produtos e linguagens tamb\u00e9m. Entretanto, kudos para <em>Flutter<\/em>!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&gt;&gt;Leitura Recomendada:<\/strong><br>Leia nosso artigo sobre as novidades no <a rel=\"noreferrer noopener\" aria-label=\"Swift 5 (abre numa nova aba)\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/o-que-mudou-no-swift-5\/\" target=\"_blank\"><strong>Swift 5<\/strong><\/a>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tutorial-flutter-de-instala-o\">Tutorial Flutter de instala\u00e7\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para instalar o Flutter basta instalar o Flutter SDK, que j\u00e1 consta o CLI (a ferramenta de linha de comando do Flutter), o compilador do Dart, o framework em si e outras ferramentas fundamentais para o funcionamento. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 preciso, tamb\u00e9m, de um dispositivo mobile onde seja poss\u00edvel executar o aplicativo (pode ser o emulador do Android e\/ou iOS ou um dispositivo f\u00edsico) e o SDK da plataforma que estejamos desenvolvendo (o SDK do Android pode ser obtido atrav\u00e9s da instala\u00e7\u00e3o do Android Studio).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-sintaxe-do-flutter\">Sintaxe do Flutter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Confira como fica um Hello World com o Flutter usando Dart:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(MaterialApp(\n    \/\/ Title\n      title: \"Exemplo\",\n      \/\/ Home\n      home: Scaffold(\n        \/\/ Appbar\n        appBar: AppBar(\n          \/\/ Title\n          title: Text(\"Exemplo\"),\n          backgroundColor: Colors.red,\n        ),\n        \/\/ Body\n        body: Container(\n          \/\/ Center the content\n          child: Center(\n            \/\/ Add Text\n            child: Text(\"Ol\u00e1, Mundo! :)\"),\n          ),\n        ),\n      )));\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-anatomia-de-um-flutter-app\"><strong>A anatomia de um Flutter App<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/a-anatomia-de-um-flutter-app-1024x576.jpg\" alt=\"anatomia de um aplicativo flutter\" class=\"wp-image-7720\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Como mencionei anteriormente, tudo em <strong>Flutter<\/strong> \u00e9 <em>widget<\/em>. E o funcionamento \u00e9 como brincar de lego e montar os blocos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vale lembrar que usaremos muitos nomes e termos comuns no mundo Flutter. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pratica a\u00ed hehe! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja a imagem a seguir e vamos em frente.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"593\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-1024x593.jpg\" alt=\"a anatomia do app flutter\" class=\"wp-image-7085\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-1024x593.jpg 1024w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-150x87.jpg 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-100x58.jpg 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-600x348.jpg 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-450x261.jpg 450w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-932x540.jpg 932w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-300x174.jpg 300w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia-768x445.jpg 768w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-1-anatomia.jpg 1574w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Baseado nisso vamos tomar como exemplo um app em que vamos utilizar <strong>Scaffold<\/strong> e isso nos d\u00e1 apenas uma tela em \u201cbranco\u201d. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E dentro do <em>Scaffold<\/em> vamos criar um <em>AppBar<\/em> no topo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora, vamos criar dentro do <em>Scaffold<\/em> um Container, que \u00e9 simplesmente uma caixa que ter\u00e1 o conte\u00fado do app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro do<em> Container<\/em>, vamos criar um <em>Column<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E agora, podemos colocar <em>widgets<\/em> dentro do <em>Column, <\/em>que ficar\u00e3o como <em>stack <\/em>(pilhas) verticalmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O primeiro <em>widget<\/em> dentro da nossa Column ser\u00e1 uma Row. E o segundo ser\u00e1 um Text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ent\u00e3o agora eu tenho uma Column com dois itens e dois widgets: Row no Top e algum Text no Bottom.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos nos aprofundar mais nessa \u00e1rvore de widgets e dentro da Row criar um Text e um Icon.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos agora uma \u00e1rvore que \u00e9 simplesmente um monte de<em> widgets<\/em> aninhados. E se colocarmos isso no c\u00f3digo, ficar\u00e1 como a imagem a seguir:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-1024x569.jpg\" alt=\"anatomia do app flutter\" class=\"wp-image-7086\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-1024x569.jpg 1024w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-150x83.jpg 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-100x56.jpg 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-600x333.jpg 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-450x250.jpg 450w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-960x534.jpg 960w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-300x167.jpg 300w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia-768x427.jpg 768w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/08\/imagem-2-anatomia.jpg 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Talvez, \u00e0 primeira impress\u00e3o, possa ser um pouco dif\u00edcil de entender. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para melhorar o entendimento e aplicar essa teoria vamos <strong>criar um app<\/strong> no pr\u00f3ximo post, fiquem ligados!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Valeu e G<em>od bless y\u2019all! See you. <\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Voc\u00ea sabia?<\/strong> Esse artigo \u00e9 o primeiro da nossa s\u00e9rie sobre o Flutter! Leia nosso tutorial sobre<strong> <a rel=\"noreferrer noopener\" aria-label=\" (abre numa nova aba)\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/flutter-criando-um-novo-projeto-do-zero\/\" target=\"_blank\">como criar um app com Flutter<\/a><\/strong>!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Crie um perfil na GeekHunter e receba propostas alinhadas ao seu perfil. S\u00e3o mais de 1000 vagas abertas, inclusive de <a href=\"https:\/\/www.geekhunter.com\/pt\/vagas?utm_source=blog&amp;utm_medium=banner&amp;utm_campaign=flutter\" target=\"_blank\" rel=\"noreferrer noopener\">Vagas Flutter<\/a>. <\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Segundo o Google, Flutter \u00e9 um UI toolkit do Google para criar aplicativos bonitos e nativos compilados para dispositivos m\u00f3veis, Web e desktop a partir de uma \u00fanica base de c\u00f3digo. Vamos detalhar um pouco mais essa parada. O que \u00e9 o Flutter? Imagine que voc\u00ea seja \u2014 se j\u00e1 n\u00e3o \u00e9 \u2014 um desenvolvedor [&hellip;]<\/p>\n","protected":false},"author":167,"featured_media":11166,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-7075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.6 (Yoast SEO v28.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Flutter: introdu\u00e7\u00e3o ao framework da Google - Blog Geekhunter<\/title>\n<meta name=\"description\" content=\"Nesse artigo fazemos uma introdu\u00e7ao ao novo framework de desenvolvimento h\u00edbrido da Google: O Flutter! Leia o conte\u00fado e fique por dentro!\" \/>\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.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introdu\u00e7\u00e3o ao Flutter, o framework da Google\" \/>\n<meta property=\"og:description\" content=\"Segundo o Google, Flutter \u00e9 um UI toolkit do Google para criar aplicativos bonitos e nativos compilados para dispositivos m\u00f3veis, Web e desktop a partir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Geekhunter\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geekhunterbr\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-06T12:11:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-24T21:00:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/flutter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Geekhunter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:site\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Geekhunter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/\"},\"author\":{\"name\":\"Geekhunter\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\"},\"headline\":\"Introdu\u00e7\u00e3o ao Flutter, o framework da Google\",\"datePublished\":\"2020-11-06T12:11:00+00:00\",\"dateModified\":\"2024-09-24T21:00:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/\"},\"wordCount\":1326,\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/flutter.png\",\"articleSection\":[\"Desenvolvimiento de software\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/\",\"name\":\"Flutter: introdu\u00e7\u00e3o ao framework da Google - Blog Geekhunter\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/flutter.png\",\"datePublished\":\"2020-11-06T12:11:00+00:00\",\"dateModified\":\"2024-09-24T21:00:19+00:00\",\"description\":\"Nesse artigo fazemos uma introdu\u00e7ao ao novo framework de desenvolvimento h\u00edbrido da Google: O Flutter! Leia o conte\u00fado e fique por dentro!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/flutter.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/flutter.png\",\"width\":1920,\"height\":1080,\"caption\":\"flutter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-flutter-o-framework-do-google\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mundo TI\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimiento de software\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/desenvolvimiento-de-software\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Introdu\u00e7\u00e3o ao Flutter, o framework da Google\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"name\":\"Blog de TI\",\"description\":\"Dicas para o RH e profissionais da \u00e1rea TI\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\",\"name\":\"GeekHunter\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"width\":300,\"height\":300,\"caption\":\"GeekHunter\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/x.com\\\/geekhunterbr\",\"https:\\\/\\\/www.instagram.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/geekhunter-brasil\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@GeekHunterOfficial\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\",\"name\":\"Geekhunter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"caption\":\"Geekhunter\"},\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/author\\\/matias\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flutter: introdu\u00e7\u00e3o ao framework da Google - Blog Geekhunter","description":"Nesse artigo fazemos uma introdu\u00e7ao ao novo framework de desenvolvimento h\u00edbrido da Google: O Flutter! Leia o conte\u00fado e fique por dentro!","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.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/","og_locale":"pt_BR","og_type":"article","og_title":"Introdu\u00e7\u00e3o ao Flutter, o framework da Google","og_description":"Segundo o Google, Flutter \u00e9 um UI toolkit do Google para criar aplicativos bonitos e nativos compilados para dispositivos m\u00f3veis, Web e desktop a partir","og_url":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/","og_site_name":"Blog Geekhunter","article_publisher":"https:\/\/www.facebook.com\/geekhunterbr\/","article_published_time":"2020-11-06T12:11:00+00:00","article_modified_time":"2024-09-24T21:00:19+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/flutter.png","type":"image\/png"}],"author":"Geekhunter","twitter_card":"summary_large_image","twitter_creator":"@geekhunterbr","twitter_site":"@geekhunterbr","twitter_misc":{"Escrito por":"Geekhunter","Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#article","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/"},"author":{"name":"Geekhunter","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400"},"headline":"Introdu\u00e7\u00e3o ao Flutter, o framework da Google","datePublished":"2020-11-06T12:11:00+00:00","dateModified":"2024-09-24T21:00:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/"},"wordCount":1326,"publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/flutter.png","articleSection":["Desenvolvimiento de software"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/","name":"Flutter: introdu\u00e7\u00e3o ao framework da Google - Blog Geekhunter","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#primaryimage"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/flutter.png","datePublished":"2020-11-06T12:11:00+00:00","dateModified":"2024-09-24T21:00:19+00:00","description":"Nesse artigo fazemos uma introdu\u00e7ao ao novo framework de desenvolvimento h\u00edbrido da Google: O Flutter! Leia o conte\u00fado e fique por dentro!","breadcrumb":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geekhunter.com/pt/blog\/introducao-ao-flutter-o-framework-do-google\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#primaryimage","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2020\/11\/flutter.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/11\/flutter.png","width":1920,"height":1080,"caption":"flutter"},{"@type":"BreadcrumbList","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-flutter-o-framework-do-google\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.geekhunter.com/pt/blog\/"},{"@type":"ListItem","position":2,"name":"Mundo TI","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimiento de software","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/desenvolvimiento-de-software\/"},{"@type":"ListItem","position":4,"name":"Introdu\u00e7\u00e3o ao Flutter, o framework da Google"}]},{"@type":"WebSite","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","name":"Blog de TI","description":"Dicas para o RH e profissionais da \u00e1rea TI","publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geekhunter.com/pt/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization","name":"GeekHunter","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","width":300,"height":300,"caption":"GeekHunter"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geekhunterbr\/","https:\/\/x.com\/geekhunterbr","https:\/\/www.instagram.com\/geekhunterbr\/","https:\/\/www.linkedin.com\/company\/geekhunter-brasil\/","https:\/\/www.youtube.com\/@GeekHunterOfficial"]},{"@type":"Person","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400","name":"Geekhunter","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","caption":"Geekhunter"},"url":"https:\/\/www.geekhunter.com\/pt\/blog\/author\/matias\/"}]}},"_links":{"self":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/7075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/comments?post=7075"}],"version-history":[{"count":0,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/7075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media\/11166"}],"wp:attachment":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media?parent=7075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/categories?post=7075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/tags?post=7075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}