Posts

Bismillahirrahmanirrahim,

Hallo sahabat uda semuanya. Semoga semuanya dalam keadaan sehat yaa hehe. Postingan kali ini akan membahas tentang Cara Membuat Grafik Pada Flutter. Berikut langkah kerja untuk membuat grafik pada flutter :

• Pastikan kita sudah membuat project Flutter nya dulu yaa.
• Tambahkan packages pada pubspec.yaml, sebagai berikut:

• Jangan lupa untuk klik packages.get
• Sebelum kita menambahkan grafik, teman – teman semua bisa lihat dulu model grafik yang ingin teman tambahkan pada link berikut ini : https://google.github.io/charts/flutter/gallery.html
• Pada project nya, tambahkan sebuah class yang menampung item yang ingin kita tampilkan pada grafik. Berikut codingannya:

class Sales{
  final String day;
  final int sold;

  final charts.Color color;

  Sales(this.day, this.sold, Color color)
  :this.color=charts.Color(r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

• Selanjutnya tambahkan data yang ingin ditampilkan pada grafik. Berikut codingannya:

var food=[
  Sales("Rendang", 50, Colors.red),
  Sales("Dendeng", 70, Colors.yellow),
  Sales("Sambalado", 100, Colors.green),
  Sales("Kepiting Saos Padang", 150, Colors.purple),
  Sales("Gulai Tabunsu", 250, Colors.grey),
  Sales("Gulai Pucuak Ubi", 180, Colors.brown),
  Sales("Mie Padeh", 30, Colors.blue),
];

• Tambahkan codingan berikut ini untuk tampilan data pada grafik:

var series=[

  charts.Series(

      domainFn: (Sales sales,_)=>sales.day,

      measureFn: (Sales sales,_)=>sales.sold,

      colorFn: (Sales sales,_)=>sales.color,

      id: 'Sales',

      data: food,

      labelAccessorFn: (Sales sales,_)=> '${sales.day}: ${sales.sold.toString()}'

  )

];

• Selanjutnya tambahkan codingan berikut ini untuk menampilkan grafik apa yang kita inginkan. Misalnya dalam bentuk BarChart atau PieChart, dan jenis grafik lainnya. Kali ini saya akan berikan 2 jenis grafik yaitu dalam bentuk Barchart dan Pie Chart, berikut codingannya:

//untuk menampilkan grafik dalam bentuk BarChart

var chart = charts.BarChart(

  series,

  vertical: true,

  barRendererDecorator: charts.BarLabelDecorator<String>(),

  domainAxis: charts.OrdinalAxisSpec(renderSpec: charts.NoneRenderSpec()),

);



//untuk menampilkan grafik dalam bentuk PieChart

var chartpie = charts.PieChart(

  series,

  defaultRenderer: charts.ArcRendererConfig(

      arcRendererDecorators: [charts.ArcLabelDecorator()],

    arcWidth: 100

  ),

  animate: true,

);

• Berikut tambahkan juga codingan pada Scaffold sebagai berikut:

return Scaffold(

  appBar: AppBar(
    title: Text('Flutter Chart'),
  ),

  body: Padding(

    padding: const EdgeInsets.all(12.0),

    child: Column(

      children: <Widget>[

        Text("Top Makanan Padang", style: TextStyle(fontSize: 30.0),),
        SizedBox(height: 400.0,child: chart),
      ],

    ),

  ),

);

• Berikut Tampilan grafiknya: