How to Create a Chart in Flutter

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang How to Create a Chart in Flutter. Chart adalah sebuah widget pada flutter yang digunakan untuk memudahkan pengguna dalam memahami dan menganalisis data.

● Bar Chart

Step 1. Tambahkan Dependencies 

Tambahkan https://pub.dev/packages/fl_chart/install pada pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.6

Step 2. Import Dependencies 

Tambahkan Import fl_chart pada barchart.dart seperti berikut 

import ‘package:fl_chart/fl_chart.dart’;

Step 3. Tambahkan List BarChartGroupData

Tambahkan List BarChartGroupData dengan menambahkan code seperti berikut 

List<BarChartGroupData> barChartGroupData = [
    BarChartGroupData(x: 1, barRods: [
      BarChartRodData(y: 5.5, colors: [Colors.black]),
    ]),
    BarChartGroupData(x: 2, barRods: [
      BarChartRodData(y: 12, colors: [Colors.black]),
    ]),
    BarChartGroupData(x: 3, barRods: [
      BarChartRodData(y: 8, colors: [Colors.black]),
    ]),
    BarChartGroupData(x: 4, barRods: [
      BarChartRodData(y: 11.4, colors: [Colors.black]),
    ]),
    BarChartGroupData(x: 5, barRods: [
      BarChartRodData(y: 5, colors: [Colors.black]),
    ]),
    BarChartGroupData(x: 6, barRods: [
      BarChartRodData(y: 14, colors: [Colors.black]),
    ]),
    BarChartGroupData(x: 7, barRods: [
      BarChartRodData(y: 10.5, colors: [Colors.black]),
    ]),
  ];

Step 4. Membuat Tampilan Chart

Buat tampilan chart dan tambahkan BarChartGroupData dengan menambahkan code seperti berikut 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘Bar Chart Flutter’),
        backgroundColor: Colors.black,
      ),
      body: SafeArea(
        child: Column(
          children: [
            Container(
                padding: EdgeInsets.all(30),
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width,
                child: BarChart(BarChartData(
                  titlesData: FlTitlesData(
                    topTitles: SideTitles(showTitles: false),
                    rightTitles: SideTitles(showTitles: false),
                    bottomTitles: SideTitles(
                      showTitles: true,
                      getTitles: (value) {
                        switch (value.toInt()) {
                          case 1:
                            return ‘Mon’;
                          case 2:
                            return ‘Tues’;
                          case 3:
                            return ‘Wed’;
                          case 4:
                            return ‘Thu’;
                          case 5:
                            return ‘Fri’;
                          case 6:
                            return ‘Sat’;
                          case 7:
                            return ‘Sun’;
                        }
                        return ”;
                      },
                    ),
                    leftTitles: SideTitles(
                      interval: 4,
                      showTitles: true,
                      getTitles: (value) {
                        if (value.toInt() == 0)
                          return ”;
                        else
                          return value.toInt().toString();
                      },
                    ),
                  ),
                  maxY: 16,
                  borderData: FlBorderData(show: false,),
                  barGroups: barChartGroupData,
                )))
          ],
        ),
      ),
    );
  }

Hasil Run : 

● Pie Chart

Step 1. Tambahkan Dependencies 

Tambahkan https://pub.dev/packages/fl_chart/install pada pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.6

Step 2. Import Dependencies 

Tambahkan Import fl_chart pada piechart.dart seperti berikut 

import ‘package:fl_chart/fl_chart.dart’;

Step 3. Tambahkan List PieChartSectionData

Tambahkan List PieChartSectionData dengan menambahkan code seperti berikut 

List<PieChartSectionData> getSectionData(double screenWidth) {
    double radius = screenWidth / 3.5;
    return [
      PieChartSectionData(
        value: 50,
        title: ‘50%’,
        radius: radius,
        titleStyle: TextStyle(color: Colors.white),
        color: Colors.blueAccent,
      ),
      PieChartSectionData(
        value: 35,
        title: ‘35%’,
        titleStyle: TextStyle(color: Colors.white),
        radius: radius,
        color: Colors.red,
      ),
      PieChartSectionData(
        value: 20,
        title: ‘20%’,
        radius: radius,
        titleStyle: TextStyle(color: Colors.white),
        color: Colors.green,
      ),
      PieChartSectionData(
        value: 25,
        title: ‘25%’,
        radius: radius,
        titleStyle: TextStyle(color: Colors.white),
        color: Colors.orangeAccent,
      ),
    ];
  }

Step 4. Membuat Tampilan Chart

Buat tampilan chart dan tambahkan getSelectionData dengan menambahkan code seperti berikut 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘Pie Chart Flutter’),
        backgroundColor: Colors.green,
      ),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(20),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.width,
              child: PieChart(
                  PieChartData(
                    centerSpaceRadius: 0,
                    borderData: FlBorderData(show: false),
                    sections: getSectionData(MediaQuery.of(context).size.width))),
            ),
          ],
        ),
      ),
    );
  }

Hasil Run : 

● Line Chart

Step 1. Tambahkan Dependencies 

Tambahkan https://pub.dev/packages/fl_chart/install pada pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.6

Step 2. Import Dependencies 

Tambahkan Import fl_chart pada linechart.dart seperti berikut 

import ‘package:fl_chart/fl_chart.dart’;

Step 3. Tambahkan List LineChartBarData

Tambahkan list linechartbardata dengan menambahkan code seperti berikut 

List<LineChartBarData> lineChartBarData = [
    LineChartBarData(
        isCurved: true,
        spots: [
          FlSpot(1, 10),
          FlSpot(2, 12),
          FlSpot(3, 10),
          FlSpot(4, 7),
          FlSpot(5, 8),
          FlSpot(6, 10),
        ]
    )
  ];

Step 4. Membuat Tampilan Line Chart

Buat tampilan line chart dan tambahkan linechartbardata dengan menambahkan code seperti berikut 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘Line Chart Flutter’),
        backgroundColor: Colors.blue,
      ),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(20),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.width,
              child: LineChart(
                LineChartData(
                  minX: 1,
                  minY: 0,
                  maxX: 6,
                  maxY: 15,
                  lineBarsData: lineChartBarData,
                ),
              )
            )
          ],
        ),
      ),
    );
  }

Hasil Run : 

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here