{"id":16629,"date":"2018-10-25T08:00:47","date_gmt":"2018-10-25T11:00:47","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=16629"},"modified":"2019-03-16T02:56:32","modified_gmt":"2019-03-16T05:56:32","slug":"conhecendo-o-flutter-o-sdk-mobile-do-google","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/conhecendo-o-flutter-o-sdk-mobile-do-google\/","title":{"rendered":"Conhecendo o Flutter &#8211; O SDK mobile do Google"},"content":{"rendered":"<p>Voc\u00ea j\u00e1 ouviu falar do <strong><em>Flutter?! <\/em><\/strong><\/p>\n<p>H\u00e1 cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework.<br \/>\nPor\u00e9m, h\u00e1 5 ou 6 meses uma nova alternativa de desenvolvimento mobile vem me chamando muito a aten\u00e7\u00e3o e me dedico algumas horas di\u00e1rias com ele, trata-se do\u00a0<strong><em>Flutter<\/em><\/strong>.<\/p>\n<p>Hoje vou explanar um pouco sobre esse poderoso Framework do Google, e, quem sabe despertar o interesse de voc\u00eas para mais uma op\u00e7\u00e3o para aprendizado e tamb\u00e9m influ\u00eancia profissional..<\/p>\n<p>Bom,<\/p>\n<p><em>O Flutter \u00e9 o Framework m\u00f3vel do Google que permite construir aplicativos Android e iOS com apenas um c\u00f3digo. O Flutter \u00e9 um c\u00f3digo aberto e gratuito.<\/em><\/p>\n<p>Ele inclui:<\/p>\n<ul>\n<li>Framework reativo moderno;<\/li>\n<li>Mecanismo de renderiza\u00e7\u00e3o em 2D muito r\u00e1pido;<\/li>\n<li>Ferramentas para desenvolvimento;<\/li>\n<li>Widgets prontos que constituem os componentes da UI do aplicativo.<\/li>\n<\/ul>\n<h2>O que os usu\u00e1rios geralmente esperam de aplicativos?<\/h2>\n<p>Posso listar pelo menos 3 fatores:<\/p>\n<ol>\n<li>Design Bonito;<\/li>\n<li>Anima\u00e7\u00f5es Suaves;<\/li>\n<li>\u00d3timo desempenho.<\/li>\n<\/ol>\n<p>Al\u00e9m disso, os desenvolvedores precisam criar novos recursos sem comprometer\u00a0 a qualidade e o desempenho.\u00a0<strong><em>\u00c9 a\u00ed que o Flutter entra.<\/em><\/strong><\/p>\n<p><em>O Flutter fornece o melhor do desenvolvimento mobile:<\/em>\u00a0<strong>desempenho e integra\u00e7\u00e3o de plataformas m\u00f3veis, com desenvolvimento r\u00e1pido e alcance multiplataforma e com ferramentas de UI port\u00e1teis.<\/strong><\/p>\n<p>Segundo o\u00a0<strong>Google<\/strong>, o\u00a0<strong><em>Flutter<\/em><\/strong><em>\u00a0<\/em>foi constru\u00eddo para melhorar a qualidade dos aplicativos, a velocidade do desenvolvimento, e para alcan\u00e7ar mais usu\u00e1rios.<\/p>\n<p>O Flutter \u00e9 \u00fanico porque o c\u00f3digo \u00e9 compilado em\u00a0<strong>ARM<\/strong>, ou seja, compila o c\u00f3digo para cada plataforma. Isso agiliza a abertura e o desempenho do aplicativo. Al\u00e9m disso, utiliza um renderizador\u00a0<strong>Mobile First<\/strong>\u00a0acelerado por\u00a0<strong>GPU<\/strong>\u00a0para que haja consist\u00eancia da UI entre as plataformas e o dispositivo. Ent\u00e3o ele projeta os Widgets com um Framework personaliz\u00e1vel e extens\u00edvel em camadas.<\/p>\n<p><strong>N\u00e3o h\u00e1 pontes entre o Framerwork e os Widgets, tornando a renderiza\u00e7\u00e3o eficiente e as anima\u00e7\u00f5es mais suaves.<\/strong><\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/1.png\"><img decoding=\"async\" class=\" wp-image-16630 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/1.png\" alt=\"\" width=\"380\" height=\"214\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/1.png 300w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/1-24x14.png 24w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<p><strong>Com o Flutter, uma View \u00e9 constru\u00edda como uma \u00e1rvore imut\u00e1vel de Widgets.<\/strong><\/p>\n<p>Os Widgets s\u00e3o a base dos aplicativos Flutter, \u00e9 uma descri\u00e7\u00e3o de parte da interface do usu\u00e1rio e quase tudo \u00e9 um Widget,\u00a0<strong>escrito em Dart<\/strong>.<\/p>\n<p><em>No Flutter, n\u00e3o existe arquivo distinto \u00a0para personaliza\u00e7\u00e3o de layout (JS, HTML, CSS), tudo \u00e9 definido em um Widget Flutter.<\/em><\/p>\n<p>Quando o estado do Widget \u00e9 alterado seja pela entrada do usu\u00e1rio ou por anima\u00e7\u00f5es, o Widget se reconstr\u00f3i de acordo com o novo estado, economizando tempo, pois a UI pode ser descrita como fun\u00e7\u00f5es de estado. N\u00e3o precisamos escrever c\u00f3digos extras para atualizar a UI quando o estado for alterado.<\/p>\n<p>O Mecanismo de renderiza\u00e7\u00e3o \u00e9 constru\u00eddo no\u00a0<strong>Skia<\/strong>, uma biblioteca de renderiza\u00e7\u00e3o gr\u00e1fica em 2D,\u00a0<strong>em Dart<\/strong>. Ele exibe Widgets para dispositivos iOS e Android. As plataformas precisam fornecer uma tela para o Flutter poder colocar os Widgets e o mecanismo de renderiza\u00e7\u00e3o. Por isso \u00e9 bom obter uma compila\u00e7\u00e3o\u00a0<strong>AOT (veremos mais abaixo)<\/strong>\u00a0no c\u00f3digo nativo.<\/p>\n<h2>Dart<\/h2>\n<p><em>O Flutter \u00e9 escrito em Dart<\/em>,\u00a0<strong>uma linguagem concisa, fortemente tipificada e orientada a objeto.<\/strong>\u00a0O Dart \u00e9 bem semelhante \u00e0 linguagens como Swift, C#, Java e JS.<\/p>\n<p>O que torna o Dart adequado para o desenvolvimento mobile?<\/p>\n<p>Primeiro, o desempenho tanto no desenvolvimento quando em produ\u00e7\u00e3o, pois ele suporta a compila\u00e7\u00e3o\u00a0<strong>JIT (Just-in-time) e a AOT (Ahead-of-time).<\/strong><\/p>\n<p><strong>A JIT<\/strong><em>\u00a0possibilita que o Flutter recompila o c\u00f3digo no dispositivo, enquanto o aplicativo est\u00e1 rodando, isso faz com que a aplica\u00e7\u00e3o n\u00e3o perca o estado de desenvolvimento. Isso gera um ciclo de desenvolvimento muito r\u00e1pido e produtivo, possibilitando o recarregamento expresso do aplicativo.<\/em><\/p>\n<p><strong>Na compila\u00e7\u00e3o AOT<\/strong>,\u00a0<em>as bibliotecas e fun\u00e7\u00f5es utilizadas pelo c\u00f3digo do aplicativo s\u00e3o compilados no c\u00f3digo\u00a0<strong>ARM<\/strong>\u00a0nativo de cada plataforma. Isso \u00e9 bom para lan\u00e7ar compila\u00e7\u00f5es, pois o c\u00f3digo nativo se inicia rapidamente e possui desempenho previs\u00edvel.<\/em><\/p>\n<h2>Na pr\u00e1tica<\/h2>\n<p>Bom, vamos ent\u00e3o por a m\u00e3o na massa.<\/p>\n<p>Antes de tudo precisamos ter o Flutter instalado em nosso ambiente de desenvolvimento, para isso, basta seguir esse pequeno tutorial disponibilizado pela equipe do Flutter: <a href=\"https:\/\/flutter.io\/get-started\/install\/\" target=\"_blank\" rel=\"noopener\">https:\/\/flutter.io\/get-started\/install\/<\/a>.<\/p>\n<p>Ambiente de desenvolvimento configurado, vamos para a a\u00e7\u00e3o:<\/p>\n<ol>\n<li>Abrindo o Android Studio, vamos clicar em \u201cConfigure\u201d &gt; \u201cPlugins\u201d:<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2.png\"><img decoding=\"async\" class=\"size-medium wp-image-16631 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2-586x480.png\" alt=\"\" width=\"586\" height=\"480\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2-586x480.png 586w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2-740x606.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2-620x508.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/2-24x20.png 24w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/a><\/p>\n<ol start=\"2\">\n<li>Ap\u00f3s isso, clicamos em \u201cBrowse Repositories\u201d<\/li>\n<\/ol>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3.png\"><img decoding=\"async\" class=\"size-medium wp-image-16632 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3-562x480.png\" alt=\"\" width=\"562\" height=\"480\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3-562x480.png 562w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3-768x656.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3-740x632.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3-620x529.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3-24x20.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/3.png 806w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><\/a><\/p>\n<p>3. E pesquisamos por \u201cFlutter\u201d, e instalamos o Plugin:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4.png\"><img decoding=\"async\" class=\"size-medium wp-image-16633 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4-569x480.png\" alt=\"\" width=\"569\" height=\"480\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4-569x480.png 569w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4-768x648.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4-740x624.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4-620x523.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4-24x20.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/4.png 825w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ol start=\"4\">\n<li>Reiniciamos o Android Studio, e ao abri-lo, podemos criar um novo Projeto Flutter (as 4 pr\u00f3ximas ilustra\u00e7\u00f5es explicam por si s\u00f3):<\/li>\n<\/ol>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5.png\"><img decoding=\"async\" class=\"wp-image-16634 alignleft\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5-600x466.png\" alt=\"\" width=\"280\" height=\"217\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5-600x466.png 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5-385x300.png 385w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5-620x482.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5-24x19.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/5.png 659w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/a><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7.png\"><img decoding=\"async\" class=\"alignnone wp-image-16636\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7-567x480.png\" alt=\"\" width=\"275\" height=\"233\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7-567x480.png 567w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7-768x651.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7-740x627.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7-620x525.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7-24x20.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/7.png 804w\" sizes=\"(max-width: 275px) 100vw, 275px\" \/><\/a><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6.png\"><img decoding=\"async\" class=\"alignnone wp-image-16635\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6-564x480.png\" alt=\"\" width=\"287\" height=\"245\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6-564x480.png 564w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6-768x654.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6-740x630.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6-620x528.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6-24x20.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/6.png 805w\" sizes=\"(max-width: 287px) 100vw, 287px\" \/><\/a><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8.png\"><img decoding=\"async\" class=\"alignnone wp-image-16637\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8-562x480.png\" alt=\"\" width=\"282\" height=\"240\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8-562x480.png 562w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8-768x656.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8-740x632.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8-620x530.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8-24x21.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/8.png 803w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/a><\/p>\n<ol start=\"5\">\n<li>Com o projeto do Flutter criado, como podemos ver, na imagem abaixo em destaque Vermelho temos toda a estrutura do projeto, e em destaque Azul temos o arquivo principal, o <strong><em>dart (<\/em><\/strong><em>reparem na extens\u00e3o .dart, que como dito no come\u00e7o do artigo \u00e9 a linguagem utilizada pelo Flutter<strong>).<\/strong><\/em><\/li>\n<\/ol>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9.png\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-16638\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9-600x311.png\" alt=\"\" width=\"600\" height=\"311\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9-600x311.png 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9-768x398.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9-740x384.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9-620x322.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9-24x12.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/9.png 1344w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ol start=\"6\">\n<li>Este \u00e9 um projeto default do Flutter, quando criamos uma aplica\u00e7\u00e3o Flutter, seja pelo Android Studio, ou pelo Prompt de Comando (CMD), este \u00e9 o aplicativo criado.<\/li>\n<\/ol>\n<p>Vou destacar alguns pontos importantes no primeiro trecho de c\u00f3digos (vide abaixo):<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/10.png\"><img decoding=\"async\" class=\"size-full wp-image-16639 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/10.png\" alt=\"\" width=\"556\" height=\"462\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/10.png 556w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/10-24x20.png 24w\" sizes=\"(max-width: 556px) 100vw, 556px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>O destaque em Vermelho \u00e9 a importa\u00e7\u00e3o do material.dart respons\u00e1vel pelo conjunto de widgets de layouts do Material par autilizarmos em nossa aplica\u00e7\u00e3o.<\/p>\n<p>O trecho destacado em Azul \u00e9 a cria\u00e7\u00e3o da nossa classe <strong>MyApp<\/strong>, classe principal e \u00fanica dessa aplica\u00e7\u00e3o.<\/p>\n<p>Utilizando o MaterialApp, n\u00f3s definimos uma cor de Tema para a aplica\u00e7\u00e3o, neste caso o \u201cColors.blue\u201d.<\/p>\n<p>Em seguida definimos que a nossa Home, ser\u00e1 a <strong><em>MyHomePage.<\/em><\/strong><\/p>\n<p>Logo abaixo, em <strong>\u201c<em>class MyHomePage extends StatefulWidget<\/em>\u201d<\/strong> n\u00f3s criamos a nossa classe <strong>MyHomePage<\/strong>, criando ainda um String \u201ctitle\u201d.<\/p>\n<p>E herdamos ent\u00e3o da Classe _MyHomePageState que vai ser alterada a partir de input do usu\u00e1rio, para isso colocamos <strong><em>\u201c_MyHomePageState createState() =&gt; new _MyHomePageState();\u201d<\/em><\/strong><\/p>\n<p>&nbsp;<\/p>\n<ol start=\"7\">\n<li>Ent\u00e3o, prosseguindo, devemos Criar a nossa classe <em>_MyHomePageState:<\/em><\/li>\n<\/ol>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13.png\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-16642\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-600x467.png\" alt=\"\" width=\"600\" height=\"467\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-600x467.png 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-768x598.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-385x300.png 385w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-740x576.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-620x482.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13-24x19.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/13.png 874w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Em destaque Vermelho criamos uma fun\u00e7\u00e3o que tem a responsabilidade de incrementar um contador (<strong><em>vari\u00e1vel _counter<\/em><\/strong>).<\/p>\n<p>Em seguida, destacado em Azul criamos o nosso <strong>Widget<\/strong>, utilizando um <strong>Scaffold, <\/strong>que j\u00e1\u00a0 nos traz in\u00fameros widgets prontos para utilizar na aplica\u00e7\u00e3o.<\/p>\n<p>Neste exemplo, utilizamos o:<\/p>\n<ul>\n<li><strong><em>AppBar: <\/em><\/strong>onde passamos o t\u00edtulo da nossa p\u00e1gina;<\/li>\n<li><strong><em>Body: <\/em><\/strong>passando 2 textos centralizados, um com texto fixo \u201c<strong>You have pushed the Button this many times:<\/strong>\u201d e outro com o valor da vari\u00e1vel <strong>_counter<\/strong>;<\/li>\n<li><strong><em>FloatingActionButton:<\/em><\/strong> um bot\u00e3o com o \u00edcone de \u201c+\u201d, que na sua fun\u00e7\u00e3o <em>onPressed, <\/em>executa a fun\u00e7\u00e3o criada, destacada em Vermelho.<\/li>\n<\/ul>\n<p>Bom, o aplicativo demo \u00e9 teoricamente simples, mas j\u00e1 vimos cria\u00e7\u00e3o de Widgets prontos com o Scaffold, cria\u00e7\u00e3o de Fun\u00e7\u00f5es, Classes e Estados.<\/p>\n<p>Na parte superior do Android Studio, em sua barra de tarefas, vamos clicar na Seta Verde para executarmos nosso aplicativo, para isso devemos conectar um dispositivo que ser\u00e1 reconhecido automaticamente, ou criar um emulador de Android:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12.png\"><img decoding=\"async\" class=\"size-medium wp-image-16641 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12-600x45.png\" alt=\"\" width=\"600\" height=\"45\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12-600x45.png 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12-768x58.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12-740x56.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12-620x47.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12-24x2.png 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/12.png 1366w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Ap\u00f3s executarmos, teremos algo semelhante \u00e0 isso, em pleno funcionamento, o nosso primeiro aplicativo escrito em Flutter:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Artigo-Flutter.gif\"><img decoding=\"async\" class=\"size-full wp-image-16643 aligncenter\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Artigo-Flutter.gif\" alt=\"\" width=\"264\" height=\"468\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Vou deixar alguns links importantes aqui para voc\u00eas se familiarizarem com o Framework:<\/p>\n<p><strong>Flutter<\/strong>:\u00a0https:\/\/flutter.io\/<\/p>\n<p><strong>Dart<\/strong>:\u00a0https:\/\/www.dartlang.org\/<\/p>\n<p>Pessoal, tudo isso faz realmente o Flutter se tornar diferenciado e s\u00f3 produzindo para perceberem como \u00e9 incr\u00edvel, realmente!<\/p>\n<p>Obrigado e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea j\u00e1 ouviu falar do Flutter?! H\u00e1 cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Por\u00e9m, h\u00e1 5 ou 6 meses uma nova alternativa de desenvolvimento mobile vem me chamando muito a aten\u00e7\u00e3o e me dedico algumas horas di\u00e1rias com ele, trata-se do\u00a0Flutter. Hoje vou explanar um pouco [&hellip;]<\/p>\n","protected":false},"author":152,"featured_media":17047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-16629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/152"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=16629"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16629\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/17047"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=16629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=16629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=16629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}