Os gráficos nos aplicativos fornecem exibições gráficas ou representações pictóricas de dados, abrangendo setores e aplicativos. Aplicativos móveis como o Mint usam gráficos de pizza para monitorar hábitos de consumo e aplicativos de condicionamento físico como Strava usam gráficos de linha e gráficos de barras para analisar ritmo, frequência cardíaca e ganho de elevação.
Ao criar aplicativos Flutter, os desenvolvedores podem usar o oficial Biblioteca charts_flutter, mantida pelo Google, para criar esses tipos de gráficos.
Neste tutorial, aprenderemos como criar alguns dos gráficos mais comuns-um gráfico de linha, um gráfico de pizza e um gráfico de barras-usando charts_flutter.
Usaremos esses gráficos para mostrar o crescimento de uma comunidade fictícia de desenvolvedores de gráficos Flutter ao longo de cinco anos. Enquanto os dados neste tutorial são fabricados, este tutorial pode facilmente utilizar dados reais.
Pré-requisitos
Para seguir este tutorial, você deve ter o seguinte:
Flutter instalado Android Studio ou Xcode instalado Um conhecimento prático do Flutter
Crie e configure um projeto do Flutter com charts_flutter
Para criar um novo projeto Flutter, execute o seguinte comando:
flutter create projectName
Em seguida, abra o novo projeto em seu editor de código. Conforme mencionado acima, usaremos chart_flutter , Biblioteca oficial do Flutter .
Para importar chart_flutter para o seu projeto, abra o arquivo pubspec.yaml e adicione-o em dependências:
dependencies: flutter: sdk: flutter charts_flutter: ^ 0.11. 0
Scaffolding o aplicativo
Agora temos o código básico que vem com os novos aplicativos Flutter: um contador que mantém um registro de quantas vezes um botão é pressionado.
Desde não precisamos disso em nosso aplicativo de gráfico de barras, vá em frente e exclua o código encontrado na página main.dart. Exclua tudo, exceto o seguinte:
import ‘package: flutter/material.dart’; void main ()=> runApp (MyApp ()); class MyApp extends StatelessWidget {@override Widget build (BuildContext context) {//TODO: implementar build Return MaterialApp (); }}
Agora, retorne a classe MaterialApp em nosso widget de construção para que possamos usar o Material Design.
Criando uma página inicial
Para criar uma página inicial para nosso aplicativo, navegue até o pasta lib e crie uma nova página chamada home.dart:
import’package: flutter/material.dart’; classe HomePage extends StatelessWidget {@override Widget build (BuildContext context) {return Scaffold (body: Center (child:,),); }}
Com import’package: flutter/material.dart’, podemos importar Material Design.
Então, a classe HomePage estende o statelessWidget, já que nenhum estado muda nesta página.
Dentro do widget BuildContext, retornamos a classe Scaffold para nos dar uma estrutura básica de layout do Material Design. Nosso gráfico de barras irá para onde o parâmetro filho está e nós o centralizaremos no corpo da tela.
Tudo isso agora serve como estrutura para nosso aplicativo.
Com a homepage completa, podemos especificar HomePage em nosso arquivo main.dart, pois main.dart reúne todos os recursos em nosso aplicativo:
class MyApp extends StatelessWidget {@override Widget build (BuildContext context) {return MaterialApp (debugShowCheckedModeBanner: false, home: HomePage (),//Aqui é onde especificamos nossa homepage); }}
Com este código, main.dart sabe qual página mostrar primeiro sempre que o aplicativo é carregado.
Observe que definir debugShowCheckedModeBanner como false remove a marca de depuração de nosso aplicativo.
Criando um aplicativo de gráfico Flutter
Séries e modelos
Antes de criar o aplicativo de gráfico, vamos nos familiarizar com dois termos comumente usados com gráficos Flutter: séries e modelos.
Uma série é um grupo (ou série) de informações que podemos usar para traçar nosso gráfico. Um modelo é o formato de nossas informações que especifica os atributos que cada item de dados usando o modelo deve ter.
Criando um gráfico de barras
Criando um modelo para dados de gráfico de barras
Para começar, criaremos um gráfico de barras para mostrar o número de novos desenvolvedores de gráficos Flutter fictícios que foram adicionados nos últimos cinco anos. Em outras palavras, queremos acompanhar o crescimento da comunidade fictícia de gráficos Flutter.
Nosso modelo, que define o formato de nossos dados, consiste no ano que estamos observando e no número de desenvolvedores que aderiram ao Comunidade de gráficos flutuantes naquele ano e a cor da barra correspondente.
Dentro da pasta lib, crie um arquivo chamado developer_series.dart. Abaixo, implemente o código para nosso modelo:
import’package: charts_flutter/flutter.dart’as charts; import’package: flutter/Foundation.dart’; classe DeveloperSeries {final int year; desenvolvedores de int final; gráficos finais.Color barColor; DeveloperSeries ({@required this.year, @required this.developers, @required this.barColor}); }
Chamamos o modelo DeveloperSeries e especificamos as propriedades que cada item da série deve ter (ano, desenvolvedores e barColor).
Para evitar que o parâmetro de uma classe seja nulo ao criar um objeto de a classe, usamos a anotação @required, como visto no bloco de código acima.
Para usar a palavra-chave @required, devemos importar o pacote foundation.dart.
Criando dados para um gráfico de barras
Agora que temos um modelo para os dados do nosso gráfico de barras, vamos continuar a criar alguns dados. Na página inicial, gere dados para o gráfico de barras adicionando o seguinte:
import’package: flutter/material.dart’; import’package: charts_flutter/flutter.dart’como gráficos; import’package:; lib/developer_series.dart’; class HomePage extends StatelessWidget {final List
Esta é uma lista simples chamada dados. Cada item na lista é modelado de acordo com o modelo DeveloperSeries, o que significa que cada item tem um ano (ano), número de desenvolvedores (desenvolvedores) e propriedade de cor da barra (barColor).
Observe que os dados acima real, fique à vontade para manipular os números e as cores.
Construindo o gráfico de barras
Criamos com sucesso os dados para o nosso gráfico de barras. Agora, vamos criar o próprio gráfico de barras. Para tornar nosso projeto organizado, colocaremos o código de nosso gráfico de barras em um arquivo separado.
Dentro de lib, crie um arquivo developer_chart.dart:
import’package: flutter/material. dardo’; import’package: charts_flutter/flutter.dart’como gráficos; import’package: lib/developer_series.dart’; a classe DeveloperChart estende os dados StatelessWidget {final List
Com os dados finais de List
Cada item de dados no lista vem com um ano correspondente, número de desenvolvedores e cor da barra.
O construtor DeveloperChart dentro da classe garante que, em todos os lugares em que a classe do gráfico de barras é usada, os dados que ela requer sejam sempre fornecidos; isso é feito usando a palavra-chave @required.
O gráfico de barras real é criado dentro de nosso widget de construção. Como você sabe, todos os gráficos de barras têm grupos de dados plotados uns contra os outros (em nosso caso, os últimos cinco anos e o número de desenvolvedores que a comunidade de gráficos Flutter ganhou).
Juntos, esses grupos de dados são conhecido como uma série. A série nos diz Flutter qual grupo de dados colocar no lado horizontal e qual grupo colocar no lado vertical de nosso gráfico de barras.
A lista de dados que criamos anteriormente é inserida em nossa série e usada apropriadamente por Flutter.
Com List
A série que acabamos de criar é modelada de acordo com o nosso modelo DeveloperSeries.
Os parâmetros que vamos estar especificando dentro de nossa série incluem id, data, domainFn, measureFn e colorFN:
id identifica os pontos de dados do gráfico para a lista de itens a serem plotados no gráfico de barras domainFn aponta para os valores que estarão no lado horizontal do gráfico de barras measureFn aponta para a quantidade de valores no lado vertical colorFN refere-se à cor das barras
Com as funções domainFn, measureFn e colorFN, criamos funções que tomam a série do assinante como um argumento, crie instâncias dele e, em seguida, use as instâncias para acessar suas diferentes propriedades.
Os sublinhados no arquivo developer_chart.dart significam que os segundos argumentos não são necessários.
Depois de apontar nossa série a todos os dados de que necessita, nós os usamos para criar nosso gráfico de barras usando g Função BarChart do Flutter.
Também podemos adicionar uma animação para apelo visual simplesmente definindo animate como true, o que renderiza o gráfico com uma boa animação.
Adicionando o gráfico de barras ao homepage
Agora, podemos adicionar nosso gráfico de barras recém-criado à nossa página inicial e exibi-lo:
import’package: flutter/material.dart’; import’package: charts_flutter/flutter.dart’como gráficos; import’package: lib/developer_series.dart’; import’package: lib/developer_chart.dart’; classe HomePage extends StatelessWidget {//… @override Widget build (BuildContext context) {return Scaffold (body: Center (child: DeveloperChart (data: data,)),); }}
Aqui, simplesmente chamamos a classe DeveloperChart dentro do corpo de nossa página e apontamos para os dados que queremos usar.
Para garantir que nosso gráfico se encaixe bem em uma tela, vamos coloque-o em um Card, envolva um contêiner em torno dele e dê a ele uma altura definida e algum preenchimento:
… class DeveloperChart extends StatelessWidget {final List
Usando o widget expandido, expandimos nosso gráfico de barras perfeitamente no cartão. O widget Texto acima dá ao nosso gráfico de barras um título para que as pessoas saibam do que se trata.
E, com Theme.of (context).textTheme.body2, aplicamos o estilo padrão do Material Design para o corpo do texto ao nosso título.
Com preenchimento: const EdgeInsets.all (9.0), demos o cartão contendo o preenchimento do gráfico de barras de 9 px em todos os lados. Por último, envolvemos o cartão em um contêiner e demos ao contêiner uma altura de 300 px e um preenchimento de 25 px em todos os lados.
Agora, nosso gráfico de barras deve renderizar bem na tela.
Criando o gráfico de pizza
Também podemos usar o pacote charts_flutter para criar gráficos de pizza. Na verdade, o procedimento que seguimos acima e o código que escrevemos podem criar um gráfico de pizza.
Para alterar o gráfico de barras que criamos para um gráfico de pizza, simplesmente altere os gráficos.BarChart (série , animate: true) to child:( charts.PieChart (series, animate: true).
Podemos então adicionar rótulos ao nosso gráfico de pizza:
Expanded (child: charts.PieChart (series , defaultRenderer: charts.ArcRendererConfig (arcRendererDecorators: [charts.ArcLabelDecorator (labelPosition: charts.ArcLabelPosition.inside)]) animate: true),)
A função ArcRendererConfig configura a aparência de um gráfico de pizza e podemos usar a função ArcLabelDecor para adicionar rótulos ao gráfico.
labelPosition especifica onde colocar os rótulos, seja dentro ou fora; neste caso, especificamos que eles deveriam estar fora.
Criando o gráfico de linha
Podemos criar um gráfico de linha da mesma forma que criamos os outros dois gráficos. Simplesmente faremos um pequeno ajuste em nossa configuração de dados.
Em nossa lista de série, List
List
Agora podemos alterar charts.PieChart para charts.Linechart para obter nosso gráfico de linhas. Por padrão, os gráficos de linha começam na origem zero. Mas os anos em que estamos nos concentrando variam de 2016 a 2021. Então, veja como fazer nosso gráfico de linha abranger este intervalo:
Expanded (child: charts.LineChart (series, domainAxis: const charts.NumericAxisSpec (tickProviderSpec: charts.BasicNumericTickProviderSpec (zeroBound: false), janela de visualização: charts.NumericExtents (2016.0, 2022.0),), animate: true),)
A função NumericAxisSpec define especificações para os eixos no gráfico. Com a função BasicNumericTickProviderSpec, definimos zeroBound como false para que nosso gráfico não comece na origem zero.
Finalmente, com a função NumericExtents, definimos o intervalo que queremos que nossos eixos abranjam.
Conclusão
O objetivo deste tutorial era mostrar aos desenvolvedores do Flutter como implementar gráficos diferentes em seus aplicativos. Usando o incrível pacote charts_flutter criado pelo Google, fomos capazes de implementar um gráfico de barras, um gráfico de pizza e um gráfico de linha.
Para saber mais sobre os recursos deste pacote, verifique em pub.dev .
