Como Visualizar Dados no Flutter com fl_chart e Back4App

introdução a visualização de dados é um aspecto crucial das aplicações modernas, ajudando os usuários a entender dados complexos por meio de gráficos e tabelas intuitivas neste tutorial, você aprenderá como criar gráficos interativos e visualmente atraentes em sua aplicação flutter usando o fl chart pacote além disso, você integrará o back4app—uma plataforma de backend como serviço (baas) alimentada pelo parse server—para armazenar e recuperar dados para seus gráficos ao final deste tutorial, você terá um aplicativo flutter totalmente funcional que exibe dados dinâmicos obtidos do back4app usando vários tipos de gráficos, como gráficos de linha, barra e pizza pré requisitos para completar este tutorial, você precisará uma conta do back4app se você não tiver uma, pode se inscrever para uma conta gratuita em back4app https //www back4app com/ flutter sdk instalado em sua máquina local você pode seguir o guia de instalação oficial do flutter https //flutter dev/docs/get started/install para o seu sistema operacional conhecimento básico de dart e flutter se você é novo no flutter, considere revisar a documentação do flutter https //flutter dev/docs para se familiarizar com os conceitos básicos parse server sdk para flutter adicionado ao seu projeto você pode aprender como configurá lo seguindo o guia do back4app flutter sdk https //www back4app com/docs/flutter/parse flutter sdk um ide ou editor de texto como visual studio code ou android studio passo 1 – configurando o backend do back4app neste passo, você criará um novo aplicativo back4app e configurará uma classe de dados para armazenar os dados do seu gráfico 1 1 criar um novo aplicativo back4app faça login no seu painel do back4app https //dashboard back4app com/ clique em "criar novo app" digite um nome para seu aplicativo, por exemplo, "flutterchartapp" , e clique em "criar" 1 2 configurar o modelo de dados no painel do seu aplicativo, navegue até a "banco de dados" seção na barra lateral esquerda clique em "criar uma classe" no topo da página na janela modal que aparece selecione "personalizado" digite "dadosdevendas" como o nome da classe clique em "criar classe" 1 3 adicionar colunas à classe na classe "dadosdevendas" clique em "+" para adicionar uma nova coluna adicione as seguintes colunas mês tipo string vendas tipo número seu modelo de dados agora está configurado para armazenar dados de vendas mensais, que você visualizará em seu aplicativo flutter passo 2 – populando o banco de dados com dados de exemplo antes de buscar dados em seu aplicativo, você precisa de alguns dados de exemplo em seu banco de dados back4app ainda na classe "dadosdevendas" clique em "+" para adicionar uma nova linha digite os seguintes dados de exemplo repita os passos acima para adicionar todas as entradas de dados de exemplo passo 3 – configurando o projeto flutter nesta etapa, você criará um novo projeto flutter e adicionará as dependências necessárias 3 1 criar um novo projeto flutter abra seu terminal e execute flutter create flutter chart app navegue até o diretório do projeto cd flutter chart app 3 2 adicionar dependências ao pubspec yaml abra pubspec yaml e adicione as seguintes dependências dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 execute flutter pub get para instalar os pacotes passo 4 – inicializando o parse em seu app flutter para conectar seu app flutter com o back4app, você precisa inicializar o sdk do parse 4 1 obter credenciais da aplicação back4app no seu painel do back4app, navegue até "configurações do app" > "segurança e chaves" anote seu id da aplicação e chave do cliente 4 2 inicializar o parse em main dart abra lib/main dart e modifique o da seguinte forma import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file in the next step void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'flutter chart app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } substitua 'your application id' e 'your client key' pelas credenciais que você obteve do back4app passo 5 – buscando dados do back4app neste passo, você irá buscar os dados de vendas do back4app usando o parse sdk 5 1 crie home page dart crie um novo arquivo lib/home page dart e adicione o seguinte código import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ fl chart/fl chart dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class salesdata { final string month; final double sales; salesdata(this month, this sales); } class homepagestate extends state\<homepage> { list\<salesdata> chartdata = \[]; @override void initstate() { super initstate(); fetchsalesdata(); } future\<void> fetchsalesdata() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('salesdata')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { chartdata = apiresponse results! map((data) { final month = data get\<string>('month') ?? ''; final sales = data get\<num>('sales')? todouble() ?? 0 0; return salesdata(month, sales); }) tolist(); }); } else { // handle errors print('error fetching data ${apiresponse error? message}'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('sales chart'), ), body chartdata isempty ? center(child circularprogressindicator()) padding( padding const edgeinsets all(16 0), child linechart( linechartdata( miny 0, maxy 250, titlesdata fltitlesdata( lefttitles axistitles( sidetitles sidetitles(showtitles true), ), bottomtitles axistitles( sidetitles sidetitles( showtitles true, gettitleswidget bottomtitlewidgets, interval 1, ), ), ), griddata flgriddata(show true), borderdata flborderdata( show true, border border all(color colors grey), ), linebarsdata \[ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], dotdata fldotdata(show true), ), ], ), ), )); } widget bottomtitlewidgets(double value, titlemeta meta) { const style = textstyle( fontsize 12, ); widget text; int index = value toint(); if (index >= 0 && index < chartdata length) { text = text(chartdata\[index] month substring(0, 3), style style); } else { text = text('', style style); } return sidetitlewidget( axisside meta axisside, child text, ); } } explicação classe salesdata uma classe de modelo simples para armazenar o mês e os dados de vendas fetchsalesdata() busca dados da classe salesdata no back4app e atualiza a lista chartdata linechart usa fl chart para criar um gráfico de linhas com base nos dados buscados bottomtitlewidgets() personaliza os rótulos do eixo inferior para exibir as abreviações dos meses passo 6 – executando o app agora que você configurou o frontend e o backend, é hora de executar seu aplicativo no seu terminal, navegue até o diretório do seu projeto execute o aplicativo usando flutter run você deve ver um gráfico de linhas exibindo os dados de vendas para cada mês passo 7 – adicionando interatividade e personalização para tornar seu gráfico mais interativo e visualmente atraente, você pode personalizá lo ainda mais 7 1 personalizar a aparência do gráfico modifique o linechartbardata no seu build método linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], belowbardata barareadata( show true, colors \[colors blue withopacity(0 3)], ), dotdata fldotdata( show true, ), ) belowbardata adiciona uma área preenchida abaixo da linha dotdata mostra pontos em cada ponto de dados 7 2 ativar interações por toque você pode ativar interações por toque para exibir dicas adicione o seguinte ao seu linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), passo 8 – exibindo diferentes tipos de gráficos você também pode exibir outros tipos de gráficos usando fl chart 8 1 exemplo de gráfico de pizza substitua o linechart no seu build método por um piechart piechart( piechartdata( sections chartdata map((data) { return piechartsectiondata( value data sales, title data month substring(0, 3), color colors primaries\[chartdata indexof(data) % colors primaries length], ); }) tolist(), sectionsspace 2, centerspaceradius 40, ), ) piechartsectiondata define cada seção do gráfico de pizza conclusão neste tutorial, você aprendeu como usar o fl chart pacote para visualizar dados em seu aplicativo flutter você integrou o back4app como uma solução de backend para armazenar e recuperar dados usando o parse sdk ao buscar dados do back4app e exibi los usando vários tipos de gráficos, agora você pode construir visualizações de dados dinâmicas e interativas em seus aplicativos flutter para aprimorar ainda mais seu aplicativo, considere explorar outros tipos de gráficos fornecidos pelo fl chart , como gráficos de barras e gráficos de radar você também pode implementar atualizações de dados em tempo real integrando consultas ao vivo do back4app recursos adicionais documentação do back4app https //www back4app com/docs pacote fl chart no pub dev https //pub dev/packages/fl chart guia do parse sdk para flutter https //docs parseplatform org/flutter/guide/ documentação oficial do flutter https //flutter dev/docs por favor, certifique se de substituir valores de espaço reservado como 'your application id' e 'your client key' com suas credenciais reais do back4app boa codificação!