{"id":3283,"date":"2022-05-02T17:18:36","date_gmt":"2022-05-02T20:18:36","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3283"},"modified":"2025-09-02T14:30:15","modified_gmt":"2025-09-02T17:30:15","slug":"bibliotecas-flutter","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2022\/05\/02\/bibliotecas-flutter","title":{"rendered":"Bibliotecas Flutter"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

<\/p>\n

Ol\u00e1 pessoal! Nesta edi\u00e7\u00e3o do PET-Reda\u00e7\u00e3o iremos fazer uma breve introdu\u00e7\u00e3o a algumas bibliotecas importantes que ir\u00e3o ajud\u00e1-los em seus desenvolvimentos que utilizam o framework Flutter, apresentando alguns de seus recursos e usos.<\/p>\n

Se voc\u00ea n\u00e3o conhece esta tecnologia, atrav\u00e9s deste\u00a0link<\/a>\u00a0<\/span>\u00e9 poss\u00edvel acessar o PET Reda\u00e7\u00e3o que introduz o framework, e explica o processo de instala\u00e7\u00e3o.\u00a0<\/span><\/p>\n

\u00a0<\/p>\n

fl_chart<\/span><\/p>\n

FL Chart \u00e9 uma biblioteca utilizada para gerar gr\u00e1ficos customiz\u00e1veis. Seu uso \u00e9 simples e permite a cria\u00e7\u00e3o de diversos tipos de gr\u00e1ficos, tais como Line Chart, Bar Chart, Pie Chart, Scatter Chart, e Radar Chart.\u00a0 No reposit\u00f3rio da biblioteca no github, est\u00e3o dispon\u00edveis diversos tipos de gr\u00e1ficos flex\u00edveis para estiliza\u00e7\u00e3o e configura\u00e7\u00e3o.\u00a0<\/p>\n

\u00a0<\/p>\n

Vamos para a pr\u00e1tica! Atrav\u00e9s do\u00a0link<\/a><\/i><\/span>\u00a0\u00e9 poss\u00edvel acessar\u00a0<\/p>\n

a documenta\u00e7\u00e3o da biblioteca para adicionar o\u00a0fl_chart\u00a0ao seu projeto.<\/p>\n

Ap\u00f3s ter seguido as instru\u00e7\u00f5es anteriores, ser\u00e1 poss\u00edvel utilizar todos os gr\u00e1ficos da biblioteca no seu projeto. Neste exemplo, vamos gerar um Pie Chart como o da imagem abaixo:<\/p>\n

\"\"\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/span><\/p>\n

PieChart(<\/code><\/p>\n

\u00a0\u00a0PieChartData(<\/code><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ read about it in the PieChartData section<\/code><\/p>\n

\u00a0\u00a0),<\/code><\/p>\n

\u00a0\u00a0swapAnimationDuration: Duration(milliseconds: 150), \/\/ animacao opcional<\/code><\/p>\n

\u00a0\u00a0swapAnimationCurve: Curves.linear, \/\/ animacao opcional<\/code><\/p>\n

);<\/code><\/p>\n

Esta \u00e9 a estrutura b\u00e1sica do Pie Chart, o c\u00f3digo completo \u00e9 poss\u00edvel acessar atrav\u00e9s do\u00a0GitHub<\/a>.<\/i><\/span>\u00a0<\/p>\n

\u00a0<\/p>\n

flutter_native_splash<\/span><\/p>\n

Ao abrir um aplicativo, por padr\u00e3o a tela fica branca at\u00e9 ele ser carregado. O flutter_native_splash possibilita que voc\u00ea personalize a tela que \u00e9 mostrada durante o carregamento, sendo poss\u00edvel utilizar modo escuro, tela inteira e op\u00e7\u00f5es espec\u00edficas da plataforma.\u00a0<\/p>\n

\"\"\u00a0\u00a0<\/span><\/p>\n

A documenta\u00e7\u00e3o, desde instala\u00e7\u00e3o e uso, pode ser acessada atrav\u00e9s do seguinte link<\/a><\/span>.<\/span><\/p>\n

\u00a0<\/p>\n

Animations<\/b><\/p>\n

Esta biblioteca cont\u00e9m anima\u00e7\u00f5es pr\u00e9-constru\u00eddas e altamente customiz\u00e1veis, podendo adicion\u00e1-las em seu projeto, deixando assim mais estilizado. Dentre as diversas funcionalidades, destacam-se:\u00a0<\/span><\/p>\n

Container transform:\"\"<\/span><\/h3>\n

Fade through: \"\"<\/span><\/h3>\n

A documenta\u00e7\u00e3o, desde instala\u00e7\u00e3o e uso, pode ser acessada atrav\u00e9s do seguinte link (https:\/\/pub.dev\/packages\/animations).<\/span><\/p>\n

\u00a0<\/p>\n

cached_network_image<\/b><\/h3>\n

Esta biblioteca possibilita que imagens da internet fiquem salvas em Cache. Ou seja, mesmo que o usu\u00e1rio n\u00e3o tenha conex\u00e3o com a internet, ter\u00e1 acesso a imagem, pois ela j\u00e1 foi acessada anteriormente e ficou salva.\u00a0<\/span><\/p>\n

\u00a0<\/p>\n

A documenta\u00e7\u00e3o, desde instala\u00e7\u00e3o e uso, pode ser acessada atrav\u00e9s do seguinte link<\/a>.<\/span><\/p>\n

\u00a0intro_slider<\/b><\/h3>\n

O Flutter Intro Slider permite o desenvolvimento de intros para seu app, de maneira simples e intuitiva \u00e9 poss\u00edvel criar uma introdu\u00e7\u00e3o de maneira r\u00e1pida.<\/span><\/p>\n

\"\"<\/span><\/p>\n

A documenta\u00e7\u00e3o, desde instala\u00e7\u00e3o e uso, pode ser acessada atrav\u00e9s do seguinte link<\/a><\/span>.<\/span><\/p>\n

\u00a0<\/p>\n

Fontes:\u00a0<\/span><\/p>\n

https:\/\/pub.dev\/packages\/fl_chart\/install<\/span><\/i><\/a>\u00a0<\/span><\/i><\/p>\n

https:\/\/pub.dev\/packages\/flutter_native_splash<\/span><\/a><\/p>\n

https:\/\/pub.dev\/packages\/animations<\/span><\/a>\u00a0<\/span><\/p>\n

https:\/\/pub.dev\/packages\/cached_network_image<\/span><\/a>\u00a0<\/span><\/p>\n

https:\/\/pub.dev\/packages\/intro_slide<\/span><\/a><\/p>\n

<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Ol\u00e1 pessoal! Nesta edi\u00e7\u00e3o do PET-Reda\u00e7\u00e3o iremos fazer uma breve introdu\u00e7\u00e3o a algumas bibliotecas importantes que ir\u00e3o ajud\u00e1-los em seus desenvolvimentos que utilizam o framework Flutter, apresentando alguns de seus recursos e usos. Se voc\u00ea n\u00e3o conhece esta tecnologia, atrav\u00e9s deste\u00a0link\u00a0\u00e9 poss\u00edvel acessar o PET Reda\u00e7\u00e3o que introduz o framework, e explica o processo de […]<\/p>\n","protected":false},"author":3802,"featured_media":3294,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[191,149],"class_list":["post-3283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-mobile","tag-redacao"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3283","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\/3802"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3283"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3283\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3294"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}