{"id":2473,"date":"2023-10-25T16:40:37","date_gmt":"2023-10-25T19:40:37","guid":{"rendered":"https:\/\/blog.innovaconnect.com.br\/?p=2473"},"modified":"2023-10-25T17:33:16","modified_gmt":"2023-10-25T20:33:16","slug":"criando-um-aplicativo-de-desenhos-no-flutter","status":"publish","type":"post","link":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/","title":{"rendered":"Criando um aplicativo de desenhos no Flutter"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Criar um aplicativo<\/a> inclui diversos desafios e um que j\u00e1 faz parte da base de todos os frameworks e linguagens \u00e9 a cria\u00e7\u00e3o de estruturas visuais, e essa tarefa pode ser realizada facilmente em qualquer das linguagens modernas. por\u00e9m controlar essa renderiza\u00e7\u00e3o e principalmente criar uma ferramenta de desenhos pode ser uma tarefa extremamente dif\u00edcil mas que o flutter consegue resolver facilmente:<\/p>\n\n\n\n

Quero apresentar umas ideias de como podemos desenvolver um aplicativo de desenho no flutter e com quais ferramentas, minha ideia aqui n\u00e3o \u00e9 disponibilizar c\u00f3digo, na programa\u00e7\u00e3o precisamos trilhar nossos pr\u00f3prios caminhos e trilhar um caminho que j\u00e1 foi passado por outro ok, pegar um uber pelo caminho s\u00f3 vai tornar seu trabalho mais f\u00e1cil, mas nem vai dar de apreciar a vista n\u00e3o \u00e9 mesmo? dito isso:<\/p>\n\n\n\n

O canvas<\/h2>\n\n\n\n

Tudo no Flutter \u00e9 renderizado e gerenciado atrav\u00e9s do canvas, \u00e9 ele que mostra na tela todos as tabelas, listas, menus de navega\u00e7\u00e3o e conte\u00fados que voc\u00ea codifica, o canvas \u00e9 uma abstra\u00e7\u00e3o t\u00e3o potente para a ger\u00eancia do frontend de um sistema IOS e Android que al\u00e9m de bibliotecas extremamente complexas de anima\u00e7\u00e3o como o Rive, h\u00e1 planos de tornar o canvas 3D \u2014 abrindo espa\u00e7o para programas mais complicados e jogos por exemplo.<\/p>\n\n\n\n

O uso do canvas no flutter \u00e9 simples, e existem diversos m\u00e9todos no flutter como o drawLine ou drawnCircle que facilitam o desenho de formas geom\u00e9tricas ou do que for necess\u00e1rio:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Estrutura<\/h2>\n\n\n\n

Algo que o canvas tamb\u00e9m permite \u00e9 que voc\u00ea modifique ele em tempo de execu\u00e7\u00e3o facilmente, ent\u00e3o atrav\u00e9s de um widget de controle de gestos GestureDetector \u00e9 poss\u00edvel saber os gestos do usu\u00e1rio como movimento de pin\u00e7a, come\u00e7ar a arrastar o dedo pela tela, clicar. Tudo isso pode ser gerenciado e fazer com que voc\u00ea realmente controle o desenho no sistema e fa\u00e7a com que voc\u00ea tenha uma ferramenta de desenho.<\/p>\n\n\n\n

Pra facilitar nossa vida essa atualiza\u00e7\u00e3o pode ser feita de uma maneira extremamente mais r\u00e1pida atrav\u00e9s de um StreamController esse controlador basicamente vai usar os processos em background do flutter para atualizar a sua tela em cada atualiza\u00e7\u00e3o do usu\u00e1rio, s\u00e3o bastante atualiza\u00e7\u00f5es realizadas por segundo, mas se seu c\u00f3digo for atualizar apenas uma pequena parte tudo bem.<\/p>\n\n\n\n

Ent\u00e3o para que realmente fosse uma pequena parte da tela que atualizasse quando estiv\u00e9ssemos escrevendo, precis\u00e1vamos que todos os outros desenhos que j\u00e1 foram criados, estivessem em outra camada que n\u00e3o atualiza com tanta frequ\u00eancia, na estrutura do flutter nosso projeto ficou com algo mais ou menos assim:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

GestureDetector<\/h2>\n\n\n\n

A ferramenta de GestureDetector<\/a> do flutter auxilia em muitos pontos como recarregar listas ao puxar de cima para baixo, arrastar para excluir e outros gestos que j\u00e1 s\u00e3o comuns no mundo mobile. Al\u00e9m disso, o mais importante para n\u00f3s no momento, o GestureDetector conta com alguns m\u00e9todos que observam seu movimento do dedo:<\/p>\n\n\n\n

onPanStart <\/h3>\n\n\n\n

Ao come\u00e7ar a arrastar o dedo pela tela.<\/p>\n\n\n\n

onPanUpdate<\/h3>\n\n\n\n

Ao ir arrastando o dedo pela tela.<\/p>\n\n\n\n

onPanEnd<\/h3>\n\n\n\n

Ao finalizar.<\/p>\n\n\n\n

Obviamente nosso shape vai come\u00e7ar a ser contabilizado no onPanStart que n\u00f3s d\u00e1 a posi\u00e7\u00e3o exata em tela que esse evento aconteceu, enquanto estiver sendo feito o desenho (onPanUpdate) apenas ser\u00e1 atualizado, sua posi\u00e7\u00e3o inicial persiste a mesma e a final igual a posi\u00e7\u00e3o da atualiza\u00e7\u00e3o. Ao final, quando terminarmos, salvaremos o desenho na lista de j\u00e1 desenhados, como iniciando no onPanStart e finalizando na posi\u00e7\u00e3o onPanEnd.<\/p>\n\n\n\n

Todos os bot\u00f5es em tela<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Nossa estrutura como j\u00e1 \u00e9 poss\u00edvel ver anteriormente no artigo possui alguns tipos diferentes de formatos na \u00e1rea superior, algumas ferramentas s\u00e3o mais complexas e outras seguem apenas o conceito do GestureDetector apresentado antes, \u00f3bvio que para controlar todas elas precisamos que nosso sistema controle de forma espec\u00edfica, por exemplo ao escolher a grossura ou a cor, esses valores ficam guardados na ger\u00eancia de estado para mudar todos os tipos de figuras.<\/p>\n\n\n\n

No caso do texto (ao clicar), ele cria o texto acima daquela parte do sistema (gra\u00e7as ao nosso stack), e o movimento de pin\u00e7a aumenta ou diminui o tamanho do texto, que \u00e9 um widget \u00e0 parte. Ent\u00e3o, para que o controle seja feito, todas as nossas figuras herdam uma classe chamada DrawnShape, que ir\u00e1 possuir as fun\u00e7\u00f5es de atualizar e criar a figura.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dando uma analisada na nossa estrutura temos um c\u00f3digo mais ou menos assim na base do nosso projeto.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

E no nosso DrawingCanvas<\/strong> apenas teremos a chamada para o sketcher (rascunho) que basicamente possui uma lista de DrawnShapes<\/strong>, claro que pra lista que estamos desenhando esse sketcher s\u00f3 possui um desenho mas no caso da lista de j\u00e1 desenhados \u00e9 uma lista de v\u00e1rios itens:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Enfim, esperamos que as ideias que utilizamos possam ajudar outras pessoas e que incentivem voc\u00eas a escreverem sobre seus trabalhos. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"

Criar um aplicativo inclui diversos desafios e um que j\u00e1 faz parte da base de todos os frameworks e linguagens<\/p>\n","protected":false},"author":5,"featured_media":2482,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[6],"tags":[38,34,25,36,39,37],"class_list":["post-2473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-aplicativo","tag-coding","tag-desenvolvimento","tag-desenvolvimento-de-sistemas","tag-flutter","tag-softwares"],"yoast_head":"\nCriando um aplicativo de desenhos no Flutter - Blog InnSpire<\/title>\n<meta name=\"description\" content=\"Criar um aplicativo inclui diversos desafios ligados a estrutura visual, com o Flutter podemos resolver isso facilmente.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando um aplicativo de desenhos no Flutter - Blog InnSpire\" \/>\n<meta property=\"og:description\" content=\"Criar um aplicativo inclui diversos desafios ligados a estrutura visual, com o Flutter podemos resolver isso facilmente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog InnSpire\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-25T19:40:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T20:33:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1360\" \/>\n\t<meta property=\"og:image:height\" content=\"841\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"InnSpire Author\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnSpire Author\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/\"},\"author\":{\"name\":\"InnSpire Author\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/person\\\/571e55b97748333a75eefb26285461d0\"},\"headline\":\"Criando um aplicativo de desenhos no Flutter\",\"datePublished\":\"2023-10-25T19:40:37+00:00\",\"dateModified\":\"2023-10-25T20:33:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/\"},\"wordCount\":846,\"publisher\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp\",\"keywords\":[\"aplicativo\",\"coding\",\"desenvolvimento\",\"desenvolvimento de sistemas\",\"Flutter\",\"softwares\"],\"articleSection\":[\"Desenvolvimento\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/\",\"name\":\"Criando um aplicativo de desenhos no Flutter - Blog InnSpire\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp\",\"datePublished\":\"2023-10-25T19:40:37+00:00\",\"dateModified\":\"2023-10-25T20:33:16+00:00\",\"description\":\"Criar um aplicativo inclui diversos desafios ligados a estrutura visual, com o Flutter podemos resolver isso facilmente.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp\",\"contentUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp\",\"width\":1360,\"height\":841},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/criando-um-aplicativo-de-desenhos-no-flutter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando um aplicativo de desenhos no Flutter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/\",\"name\":\"Blog InnSpire\",\"description\":\"Blog sobre inova\u00e7\u00e3o e tecnologia na \u00e1rea de desenvolvimento.\",\"publisher\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#organization\",\"name\":\"Blog InnSpire\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/logotipo-blog-innspire.png\",\"contentUrl\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/logotipo-blog-innspire.png\",\"width\":367,\"height\":73,\"caption\":\"Blog InnSpire\"},\"image\":{\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/innovaconnect\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/innovaconnect\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/#\\\/schema\\\/person\\\/571e55b97748333a75eefb26285461d0\",\"name\":\"InnSpire Author\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g\",\"caption\":\"InnSpire Author\"},\"url\":\"https:\\\/\\\/innspire.dev\\\/blog\\\/author\\\/dev\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando um aplicativo de desenhos no Flutter - Blog InnSpire","description":"Criar um aplicativo inclui diversos desafios ligados a estrutura visual, com o Flutter podemos resolver isso facilmente.","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:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/","og_locale":"pt_BR","og_type":"article","og_title":"Criando um aplicativo de desenhos no Flutter - Blog InnSpire","og_description":"Criar um aplicativo inclui diversos desafios ligados a estrutura visual, com o Flutter podemos resolver isso facilmente.","og_url":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/","og_site_name":"Blog InnSpire","article_published_time":"2023-10-25T19:40:37+00:00","article_modified_time":"2023-10-25T20:33:16+00:00","og_image":[{"width":1360,"height":841,"url":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp","type":"image\/webp"}],"author":"InnSpire Author","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"InnSpire Author","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#article","isPartOf":{"@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/"},"author":{"name":"InnSpire Author","@id":"https:\/\/innspire.dev\/blog\/#\/schema\/person\/571e55b97748333a75eefb26285461d0"},"headline":"Criando um aplicativo de desenhos no Flutter","datePublished":"2023-10-25T19:40:37+00:00","dateModified":"2023-10-25T20:33:16+00:00","mainEntityOfPage":{"@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/"},"wordCount":846,"publisher":{"@id":"https:\/\/innspire.dev\/blog\/#organization"},"image":{"@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp","keywords":["aplicativo","coding","desenvolvimento","desenvolvimento de sistemas","Flutter","softwares"],"articleSection":["Desenvolvimento"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/","url":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/","name":"Criando um aplicativo de desenhos no Flutter - Blog InnSpire","isPartOf":{"@id":"https:\/\/innspire.dev\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#primaryimage"},"image":{"@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp","datePublished":"2023-10-25T19:40:37+00:00","dateModified":"2023-10-25T20:33:16+00:00","description":"Criar um aplicativo inclui diversos desafios ligados a estrutura visual, com o Flutter podemos resolver isso facilmente.","breadcrumb":{"@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#primaryimage","url":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp","contentUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/criando-um-aplicativo-de-desenhos-no-flutter-copiar.webp","width":1360,"height":841},{"@type":"BreadcrumbList","@id":"https:\/\/innspire.dev\/blog\/criando-um-aplicativo-de-desenhos-no-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/innspire.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Criando um aplicativo de desenhos no Flutter"}]},{"@type":"WebSite","@id":"https:\/\/innspire.dev\/blog\/#website","url":"https:\/\/innspire.dev\/blog\/","name":"Blog InnSpire","description":"Blog sobre inova\u00e7\u00e3o e tecnologia na \u00e1rea de desenvolvimento.","publisher":{"@id":"https:\/\/innspire.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/innspire.dev\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/innspire.dev\/blog\/#organization","name":"Blog InnSpire","url":"https:\/\/innspire.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/innspire.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/logotipo-blog-innspire.png","contentUrl":"https:\/\/innspire.dev\/blog\/wp-content\/uploads\/2023\/10\/logotipo-blog-innspire.png","width":367,"height":73,"caption":"Blog InnSpire"},"image":{"@id":"https:\/\/innspire.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/innovaconnect\/","https:\/\/www.linkedin.com\/company\/innovaconnect\/"]},{"@type":"Person","@id":"https:\/\/innspire.dev\/blog\/#\/schema\/person\/571e55b97748333a75eefb26285461d0","name":"InnSpire Author","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b1a8653f06af3c23f671b19408f6b888f876fcc516d0313ef3c98ef653b77ed5?s=96&d=mm&r=g","caption":"InnSpire Author"},"url":"https:\/\/innspire.dev\/blog\/author\/dev\/"}]}},"_links":{"self":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/posts\/2473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/comments?post=2473"}],"version-history":[{"count":0,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/posts\/2473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/media\/2482"}],"wp:attachment":[{"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/media?parent=2473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/categories?post=2473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/innspire.dev\/blog\/wp-json\/wp\/v2\/tags?post=2473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}