smooth_line_chart 0.0.1

The simplest way to add stunning line charts to your Flutter app. Smooth bezier curves, tap/hover tooltips, dark mode support, and fully customizable colors — all with zero dependencies.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'smooth_line_chart demo',
      theme: ThemeData(useMaterial3: true),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  static const _xValues = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
  static const _yValues = [
    120000.0, 340000.0, 210000.0, 480000.0, 390000.0, 520000.0
  ];
  static const _qtyValues = [12, 34, 21, 48, 39, 52];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('smooth_line_chart demo')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // ── Basic usage ──────────────────────────────────────────────────
            const Text(
              'Basic usage',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            SmoothLineChart(
              xValues: _xValues,
              yValues: _yValues,
              qtyValues: _qtyValues,
              title: 'Monthly Revenue',
              labelFormatter: (v) => 'Rp ${shortNumber(v)}',
              qtyFormatter: (q) => 'Orders: $q',
            ),

            const SizedBox(height: 32),

            // ── Custom theme ─────────────────────────────────────────────────
            const Text(
              'Custom theme (teal)',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            SmoothLineChart(
              xValues: _xValues,
              yValues: _yValues,
              title: 'Revenue (teal theme)',
              theme: const ChartTheme(
                lineColor: Color(0xFF0D9488),
                fillColor: Color(0x260D9488),
                gridColor: Color(0x1F0D9488),
              ),
              labelFormatter: (v) => shortNumber(v),
            ),

            const SizedBox(height: 32),

            // ── Dark theme ───────────────────────────────────────────────────
            const Text(
              'Dark theme',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: const Color(0xFF111827),
                borderRadius: BorderRadius.circular(16),
              ),
              child: SmoothLineChart(
                xValues: _xValues,
                yValues: _yValues,
                title: 'Revenue',
                theme: ChartTheme.dark,
                labelFormatter: (v) => shortNumber(v),
              ),
            ),

            const SizedBox(height: 32),

            // ── Async with range selector ─────────────────────────────────────
            const Text(
              'Async + RangeSelector',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            SmoothLineChartAsync(
              title: 'Sales Analysis',
              initialRange: '1M',
              rangeOptions: const [
                RangeOption(label: '1W', value: '1W'),
                RangeOption(label: '1M', value: '1M'),
                RangeOption(label: '3M', value: '3M'),
                RangeOption(label: '6M', value: '6M'),
                RangeOption(label: '1Y', value: '1Y'),
              ],
              dataLoader: (range) async {
                // Simulate network delay
                await Future.delayed(const Duration(milliseconds: 600));
                return _mockData(range);
              },
              labelFormatter: (v) => 'Rp ${shortNumber(v)}',
            ),
          ],
        ),
      ),
    );
  }

  static ChartData _mockData(String range) {
    final data = {
      '1W': ChartData(
        xValues: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yValues: [50000, 75000, 62000, 90000, 88000, 110000, 95000],
      ),
      '1M': ChartData(
        xValues: ['W1', 'W2', 'W3', 'W4'],
        yValues: [350000, 420000, 390000, 510000],
      ),
      '3M': ChartData(
        xValues: ['Jan', 'Feb', 'Mar'],
        yValues: [1200000, 1500000, 1350000],
      ),
      '6M': ChartData(
        xValues: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        yValues: [1200000, 1500000, 1350000, 1700000, 1600000, 1900000],
      ),
      '1Y': ChartData(
        xValues: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        yValues: [1200000, 1500000, 1350000, 1700000, 1600000, 1900000,
                  2100000, 1950000, 2200000, 2400000, 2300000, 2600000],
      ),
    };
    return data[range] ??
        ChartData(xValues: ['No data'], yValues: [0]);
  }
}