A scrollable time chart in Flutter

time chart

an amazing time chart in flutter.

chart types

timechart	amountchart

getting started

1 – depend on it

add it to your package’s pubspec.yaml file

dependencies:
  time_chart: ^0.1.0-nullsafety.1

2 – install it

install packages from the command line

flutter packages get

3 – usage

just input your datetimerange list to data: argument. the list must be sorted. first data is
latest, last data is oldest. and set the viewmode.

example

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

void main() => runapp(myapp());

class myapp extends statelesswidget {

  // data must be sorted.
  final data = [
    datetimerange(
      start: datetime(2021,2,24,23,15),
      end: datetime(2021,2,25,7,30),
    ),
    datetimerange(
      start: datetime(2021,2,22,1,55),
      end: datetime(2021,2,22,9,12),
    ),
    datetimerange(
      start: datetime(2021,2,20,0,25),
      end: datetime(2021,2,20,7,34),
    ),
    datetimerange(
      start: datetime(2021,2,17,21,23),
      end: datetime(2021,2,18,4,52),
    ),
    datetimerange(
      start: datetime(2021,2,13,6,32),
      end: datetime(2021,2,13,13,12),
    ),
    datetimerange(
      start: datetime(2021,2,1,9,32),
      end: datetime(2021,2,1,15,22),
    ),
    datetimerange(
      start: datetime(2021,1,22,12,10),
      end: datetime(2021,1,22,16,20),
    ),
  ];

  @override
  widget build(buildcontext context) {
    final sizedbox = const sizedbox(height: 16);

    return materialapp(
      home: scaffold(
        appbar: appbar(title: const text('time chart example app')),
        body: singlechildscrollview(
          child: padding(
            padding: const edgeinsets.all(16.0),
            child: column(
              children: [
                const text('weekly time chart'),
                timechart(
                  data: data,
                  viewmode: viewmode.weekly,
                ),
                sizedbox,
                const text('monthly time chart'),
                timechart(
                  data: data,
                  viewmode: viewmode.monthly,
                ),
                sizedbox,
                const text('weekly amount chart'),
                timechart(
                  data: data,
                  charttype: charttype.amount,
                  viewmode: viewmode.weekly,
                  barcolor: colors.deeppurple,
                ),
                sizedbox,
                const text('monthly amount chart'),
                timechart(
                  data: data,
                  charttype: charttype.amount,
                  viewmode: viewmode.monthly,
                  barcolor: colors.deeppurple,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

supported languages

english	korean

you can also use korean language by internationalizing flutter apps.