filament_mobile_charts 0.1.6

Draws a Filament panel's published dashboard charts with fl_chart — the opt-in other half of filament_mobile, which ships no charting dependency.

example/lib/main.dart

import 'package:filament_mobile/filament_mobile.dart';
import 'package:filament_mobile_charts/filament_mobile_charts.dart';
import 'package:flutter/material.dart';

void main() => runApp(const ChartsExampleApp());

/// The renderer on its own, with no panel behind it.
///
/// In a real host `flChartBuilder()` goes into `DashboardScreen`'s
/// `chartBuilder` slot and the data arrives from the server. But the builder
/// is an ordinary function of `(BuildContext, ChartWidgetData)`, so a handful
/// of fixtures shows every branch — including the honest fallbacks — without
/// a Laravel panel, a transport or a login.
class ChartsExampleApp extends StatelessWidget {
  const ChartsExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'filament_mobile_charts',
      theme: ThemeData(colorSchemeSeed: kDefaultChartPalette.first),
      home: const _Gallery(),
    );
  }
}

/// One fixture per interesting branch: a multi-series line, a grouped bar, a
/// doughnut, and a `chartType` this build cannot draw.
const _fixtures = <ChartWidgetData>[
  ChartWidgetData(
    heading: 'Orders per month',
    chartType: 'line',
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      ChartDataset(label: 'This year', data: [12, 19, 14, 27, 22]),
      ChartDataset(label: 'Last year', data: [8, 11, 17, 15, 19]),
    ],
  ),
  ChartWidgetData(
    heading: 'Revenue by region',
    chartType: 'bar',
    labels: ['North', 'South', 'East', 'West'],
    datasets: [
      ChartDataset(label: 'Q1', data: [30, 22, 41, 18]),
      ChartDataset(label: 'Q2', data: [26, 35, 33, 24]),
    ],
  ),
  ChartWidgetData(
    heading: 'Traffic sources',
    chartType: 'doughnut',
    labels: ['Direct', 'Search', 'Social', 'Referral'],
    datasets: [
      ChartDataset(data: [44, 31, 17, 8]),
    ],
  ),
  ChartWidgetData(
    heading: 'A type fl_chart has no answer for',
    description: 'Renders the unsupported-type note, never a blank box.',
    chartType: 'polarArea',
    labels: ['A', 'B', 'C'],
    datasets: [
      ChartDataset(data: [1, 2, 3]),
    ],
  ),
];

class _Gallery extends StatelessWidget {
  const _Gallery();

  @override
  Widget build(BuildContext context) {
    final builder = flChartBuilder();

    return Scaffold(
      appBar: AppBar(title: const Text('filament_mobile_charts')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          for (final data in _fixtures)
            Card(
              margin: const EdgeInsets.only(bottom: 16),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      data.heading ?? '',
                      style: Theme.of(context).textTheme.titleMedium,
                    ),
                    if (data.description != null)
                      Padding(
                        padding: const EdgeInsets.only(top: 4),
                        child: Text(
                          data.description!,
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                      ),
                    const SizedBox(height: 16),
                    SizedBox(height: 220, child: builder(context, data)),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }
}