Chart untuk Flutter Mobile dan Web

Banyak aplikasi yang perlu menampilkan semacam data dalam bentuk grafik. Baru-baru ini saya mencoba untuk membuat grafik di Flutter mobile dan Web dan ingin memandu anda melalui implementasi.

Dalam contoh ini, kita akan menggunakan charts_flutter package.

Untuk memulai, kita perlu menambahkannya sebagai dependensi di pubspec.yaml.

dependencies: 
    charts_flutter: ^0.9.0

Paket ini memiliki contoh galery yang termasuk potongan kode yang menunjukkan bagaimana menerapkan setiap contoh. Dalam postingan ini kita akan mencoba melalui membuat grafik.

Hasil akhirnya adalah aplikasi yang menampilkan grafik di Flutter Mobile dan Web.

Setelah kami mengimpor package pada dependency, kami perlu mendapatkan data dari sumber data kami dan mengubahnya menjadi model yang pustaka grafik. Untuk melakukan ini, kita akan mulai dengan pola repositori. kami akan membuat kelas ReportRepository dan mengambil laporan kami darinya. Data yang kami gunakan berasal dari perangkat sensor dan perangkat sensor memberi kami data getaran dan jumlah perjalanan.

Setiap entri laporan akan terlihat seperti ini:

{
    "date": "2020-01-15T19:00:00-0500",
    "trips": 553,
    "vibration": 1.08154506437768,
    "doors": 1161
  },

Kami akan mem-parsing data dari file json lokal dan kemudian mengembalikannya sebagai daftar laporan.

class Report {
  final String date;
  final double vibration;

  Report({this.date, this.vibration});

  factory Report.fromJson(Map json) {
    return Report(
        date: json['date'] as String, vibration: json['vibration'] as double);
  }
}

Sebagai contoh, kami hanya tertarik pada data getaran sehingga hanya itu yang akan kami uraikan ke objek laporan.

Selanjutnya, kita akan menonversi data "API" menjadi objek model yang dapat digunakan charts_flutter. charts_flutter mengharapkan serangkaian data yang terkait dengan domain dan mereka menyediakan factory untuk mengisi objek yang dapat mereka gunakan. Kutipan dapat dilihat di bawah ini.

factory Series(
      {@required String id,
      @required List data,
      @required TypedAccessorFn domainFn,
      @required TypedAccessorFn measureFn,

Dengan ini, kami tau kami harus mengambil entri laporan kami yang mencakup tanggal dan pengukuran untuk getaran dan mengisi factory series yang dapat kita lihat di atas.

Kami akan mulai dengan mengubah data laporan kami lagi menjadi sesuatu yang dapat kita gunakan. 

Catatan: Kami bisa melakukan ini ketika kami mendapatkan data dari API, tetapi kadang-kadang lebih baik menjaga model untuk sisa domain anda murni dan memetakannya ke model yang saat ni sedang digunakan saat diperlukan. ini membantu menciptakan pemisahan dan meminimalkan dampak jika area lain dari aplikasi anda mulai bergantung pada model laporan. Ini adalah model yang kami akan memetakan entri kami ke:

class VibrationData {
  final DateTime time;
  final double vibrationReading;

  VibrationData(this.time, this.vibrationReading);
}

Selanjutnya, kita akan memanfaatkan factory Series yang telah kita bicarakan sebelumnya. Untuk ini, kami telah membuat fungsi statis yang mengambil daftar VibrationData dan mengembalikan tipe Series yang bisa kita gunakan dengan charts_flutter.

static List _createChartData(List vibrationData) {

    var data = [
      new Series(
        id: 'Desktop',
        colorFn: (_, __) => MaterialPalette.green.shadeDefault,
        domainFn: (VibrationData vibrationData, _) => vibrationData.time,
        measureFn: (VibrationData vibrationData, _) => vibrationData.vibrationReading,
        data: vibrationData,
      ),
    ];

    return data;
  }
}

Setelah kami selesai melakukannya, kami siap menggunakan data Series dengan Grafik kami! Kita hampir sampai. Yang harus dimiliki hanyalah data Series kami

TimeSeriesChart(
    List> seriesList, {etc})

Maka dengan itu, kita masukan data Series yang telah kita buat sebelumnya dan grafik akan ditampilkan

TimeSeriesChart(vibrationData)

Implementasi sampel kami, menetapkan beberapa bidang opsional di TimeSeriesChart dan membungkusnya dalam FractionallySizedBox

FractionallySizedBox(
                    child: TimeSeriesChart(
                      vibrationData,
                      defaultRenderer: new LineRendererConfig(
                          includeArea: true, stacked: true),
                      animate: false,
                      domainAxis:
                          new DateTimeAxisSpec(renderSpec: NoneRenderSpec()),
                    )

Dan kita selesai, ini akan berhasil ditampilkan di seluler dan web.

Full Code: disini

Terima Kasih sudah membaca Chart untuk Flutter Mobile dan Web. Semoga Bermanfaat!

Tag:

Pemrograman