{"id":2669,"date":"2018-09-18T14:18:00","date_gmt":"2018-09-18T17:18:00","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2669"},"modified":"2025-09-02T15:08:51","modified_gmt":"2025-09-02T18:08:51","slug":"flutter-o-futuro-de-aplicacoes-desktop-mobile-e-web","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2018\/09\/18\/flutter-o-futuro-de-aplicacoes-desktop-mobile-e-web","title":{"rendered":"FLUTTER: O futuro de aplica\u00e7\u00f5es desktop, mobile e web?"},"content":{"rendered":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ol\u00e1 pessoal, o PET-Reda\u00e7\u00e3o de hoje vai abordar sobre uma tecnologia promissora da Google, o Flutter. \u00c9 um SDK open-source com o objetivo de construir aplica\u00e7\u00f5es mobile, web e desktop a partir de um \u00fanico c\u00f3digo(multiplataforma). Dessa forma, permite um r\u00e1pido desenvolvimento aliado a uma expressiva e flex\u00edvel UI. Al\u00e9m disso, o desempenho \u00e9 nativo tanto para Android quanto para iOS, o que permite que apps fluam mais r\u00e1pido trazendo \u00f3timos benef\u00edcios a aplica\u00e7\u00e3o. \u00c9 programado em Dart, uma linguaguem da Google, parecida com Java, e compilada em c\u00f3digo de m\u00e1quina. Tudo no Flutter s\u00e3o widgets e esses widgets formam uma \u00e1rvore com hierarquia pai e filho, dessa forma se torna mais f\u00e1cil de fazer as cria\u00e7\u00f5es pois h\u00e1 muitas op\u00e7\u00f5es de widgets dispon\u00edveis, ao contr\u00e1rio do React Native, tecnologia do Facebook que utiliza JavaScript onde widgets s\u00e3o chamados de componentes onde estes n\u00e3o apresentam tanta complexidade, sendo necess\u00e1rio a cria\u00e7\u00e3o dos mesmos. Al\u00e9m disso, o Flutter apresenta melhor desempenho em compara\u00e7\u00e3o com o React Native j\u00e1 que na tecnologia do Facebook \u00e9 feito uma ponte entre o c\u00f3digo nativo e o Javascript. Uma curiosidade muito interessante \u00e9 de que a Google est\u00e1 desenvolvendo um novo sistema operacional, chamado de Fuchsia, para substituir o grandioso Android utilizando Flutter, j\u00e1 que a performance ser\u00e1 muito melhor que o atual SO da empresa. Grandes organiza\u00e7\u00f5es est\u00e3o adotanto a nova tecnologia da Google diante das vantagens de a utiliz\u00e1-la. Um grande exemplo \u00e9 a Nubank, fintech brasileira que est\u00e1 mudando o cen\u00e1rio de bancos no pa\u00eds, estar alterando suas aplica\u00e7\u00f5es para o Flutter. Diante disso, n\u00e3o surgem d\u00favidas de que o Flutter tem muito a evoluir e crescer no mercado. Que tal instala-lo e dar os primeiros passos<\/p>\n

Primeiro\u00a0clique aqui<\/a><\/span>\u00a0e instale o Flutter e o Android Studio conforme os passos.<\/p>\n

Ap\u00f3s a instala\u00e7\u00e3o abra o terminal e digite:\u00a0flutter doctor<\/em>\u00a0e aparecer\u00e1 a seguinte tela, significando que o Flutter est\u00e1 instalado e o Android Studio tamb\u00e9m.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Agora abra o Android Studio e vamos configura-lo clicando em Configure e em Plugins<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ap\u00f3s isso, procure pelos plugins do Dart e do Flutter o os instale.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Vamos criar um projeto, para isso clique em Start a new Flutter project e em Flutter Application, escolha um nome para o projeto e selecione o PATH do Flutter, bem como a localiza\u00e7\u00e3o desejada do projeto:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ap\u00f3s isso aparecer\u00e1 uma tela com configura\u00e7\u00f5es de nome de dom\u00ednio, deixe assim ou coloque qualquer nome e ent\u00e3o clique em Next.<\/p>\n

O projeto ser\u00e1 criado e aparecer\u00e1 a seguinte tela:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Clique na imagem do smartphone e selecione um emulador(caso n\u00e3o tenha um , crie um), ap\u00f3s isso clique no bot\u00e3o play para executar a aplica\u00e7\u00e3o exemplo.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

A aplica\u00e7\u00e3o exemplo vai ser emulada e podemos ver que o modelo possui um bot\u00e3o + que realizar\u00e1 incremento de quantas vezes o usu\u00e1rio clicou nesse bot\u00e3o. Espero que tenha gostado e boas cria\u00e7\u00f5es!<\/p>\n

\u00a0<\/p>\n

Refer\u00eancias:<\/p>\n

https:\/\/flutter.dev\/<\/a><\/span><\/p>\n

https:\/\/www.zup.com.br\/blog\/flutter<\/a><\/span><\/p>\n

https:\/\/tableless.com.br\/flutter-porque-investir-nessa-tecnologia\/<\/a><\/span><\/p>\n

https:\/\/www.pipelinelab.com.br\/flutter-nubank-vai-migrar-ou-esta-migrando-para-o-flutter\/<\/a><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"

Ol\u00e1 pessoal, o PET-Reda\u00e7\u00e3o de hoje vai abordar sobre uma tecnologia promissora da Google, o Flutter. \u00c9 um SDK open-source com o objetivo de construir aplica\u00e7\u00f5es mobile, web e desktop a partir de um \u00fanico c\u00f3digo(multiplataforma). Dessa forma, permite um r\u00e1pido desenvolvimento aliado a uma expressiva e flex\u00edvel UI. Al\u00e9m disso, o desempenho \u00e9 nativo […]<\/p>\n","protected":false},"author":2948,"featured_media":2663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[203,191,149],"class_list":["post-2669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-frameworks","tag-mobile","tag-redacao"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/2669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/2948"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=2669"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/2669\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/2663"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=2669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=2669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=2669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}