google_analystic_charts

Plugin Flutter para renderizar gráficos do Google (Google Charts) com suporte a Android, iOS, macOS e Web.

Ele facilita mostrar gráficos tipo linha, coluna, barra, área, pizza e donut, a partir de dados tabulares. Você pode alimentar com dados vindos do Google Analytics (GA4) do seu backend, ou consumir a API do GA4 diretamente quando tiver um access token.

Aviso importante: a API do GA4 exige OAuth 2.0 (token de acesso) ou Service Account. Você pode:

Fornecer um access token (recomendado: obtido via backend ou OAuth de usuário), ou
Usar Service Account no cliente apenas para protótipo (não recomendado em produção).

Plataformas suportadas

Android / iOS / macOS: usa webview_flutter com HTML responsivo do Google Charts
Web: usa HtmlElementView e injeta loader.js diretamente no DOM
Windows / Linux: exibe um placeholder de “não suportado” no momento

Instalação

No pubspec.yaml do seu app, adicione:

dependencies:
  google_analystic_charts:
    path: ../  # ou ^x.y.z quando publicado

Este plugin depende de webview_flutter para plataformas móveis/desktop compatíveis.

Uso básico (dados locais)

import 'package:flutter/material.dart';
import 'package:google_analystic_charts/google_analystic_charts.dart';

final data = <List<Object?>>[
  ['Dia', 'Usuários'],
  ['Seg', 1200],
  ['Ter', 1350],
  ['Qua', 1280],
  ['Qui', 1600],
  ['Sex', 1900],
  ['Sáb', 900],
  ['Dom', 700],
];

GaChart(
  type: GaChartType.line,
  data: data,
  options: const {
    'legend': {'position': 'bottom'},
    'curveType': 'function',
  },
  backgroundColor: Colors.white,
  borderRadius: BorderRadius.all(Radius.circular(8)),
)

Tipos de gráfico disponíveis: line, area, bar, column, pie, donut.

data deve estar no formato arrayToDataTable do Google Charts, onde a primeira linha contém os rótulos das colunas.

Buscar dados diretamente do GA4 (sem backend)

Você pode usar o Ga4Chart com um access token já obtido e ele fará o runReport automaticamente:

Ga4Chart(
  type: GaChartType.line,
  propertyId: '123456789',
  metrics: const ['activeUsers'],
  dimensions: const ['date'],
  dateRanges: const [Ga4DateRange('7daysAgo', 'today')],
  accessToken: '<SEU_ACCESS_TOKEN>', // ou tokenProvider
  options: const {'legend': {'position': 'bottom'}},
)

Ou implemente Ga4TokenProvider para buscar o token dinamicamente:

class MyTokenProvider implements Ga4TokenProvider {
  @override
  Future<String> getAccessToken() async {
    // Exemplo: buscar do seu backend
    return '<token>'; 
  }
}

Ga4Chart(
  type: GaChartType.line,
  propertyId: '123456789',
  metrics: const ['activeUsers'],
  dimensions: const ['date'],
  dateRanges: const [Ga4DateRange('7daysAgo', 'today')],
  tokenProvider: MyTokenProvider(),
)

Nota sobre Service Account no cliente: o helper Ga4ServiceAccountTokenProvider está disponível, porém a assinatura JWT RS256 local não está implementada por padrão neste plugin (por segurança e simplicidade). Prefira obter o access_token no servidor ou usar OAuth de usuário.

Flutter Web (OAuth sem backend)

No Web, você pode usar Ga4WebGsiTokenProvider (Google Identity Services) passando o clientId do OAuth Web:

Ga4Chart(
  type: GaChartType.line,
  propertyId: '123456789',
  metrics: const ['activeUsers'],
  dimensions: const ['date'],
  dateRanges: const [Ga4DateRange('7daysAgo', 'today')],
  tokenProvider: Ga4WebGsiTokenProvider(clientId: '<SEU_CLIENT_ID_WEB>'),
)

O provider carrega o script https://accounts.google.com/gsi/client automaticamente.

Dicas para usar com Google Analytics (GA4)

Opção 1 (sem backend): forneça um accessToken e o plugin chama a API GA4 direto.
Opção 2 (recomendada): crie um endpoint no seu backend que chama a API GA4 e devolve a tabela já pronta.
Segurança: evite embutir chaves/segredos no app. Prefira OAuth de usuário ou token vindo do backend.
Transformação: mapeie a resposta do GA4 para um List<List<Object?>>, por exemplo: [['Dia', 'Usuários'], ['2025-09-01', 1234], ...].
Helper incluído: ga4ReportToTable(response) converte um RunReportResponse oficial do GA4 para o formato aceito pelo widget.

Limitações atuais

Windows e Linux não têm WebView integrado neste plugin. Podemos adicionar suporte em versões futuras usando plugins específicos.
O carregamento do Google Charts usa CDN (https://www.gstatic.com/charts/loader.js). O app precisa de acesso à internet.

Exemplo

Veja o app de exemplo em example/lib/main.dart:1.