💜

綺麗な棒グラフを作ってみた

2024/04/22に公開

Flutter

Dart

tech

🤔やってみたいこと

昔から個人開発で使っているグラフのライブラリのfl_chartを使用して綺麗な棒グラフを作ってみました。公式のコードは必要ないアニメーションもついていてわかりにくい💦
https://pub.dev/packages/fl_chart

このコードを書くだけで棒グラフは作れます。

Expanded(
              child: BarChart(BarChartData(
                  borderData: FlBorderData(
                      border: const Border(
                    top: BorderSide.none,
                    right: BorderSide.none,
                    left: BorderSide(width: 1),
                    bottom: BorderSide(width: 1),
                  )),
                  groupsSpace: 10,
                  barGroups: [
                    BarChartGroupData(x: 1, barRods: [
                      BarChartRodData(fromY: 0, toY: 4, width: 15, color: Colors.amber),
                    ]),
                    BarChartGroupData(x: 2, barRods: [
                      BarChartRodData(fromY: 0, toY: 7, width: 15, color: Colors.indigo),
                    ]),
                    BarChartGroupData(x: 3, barRods: [
                      BarChartRodData(fromY: 0, toY: 10, width: 15, color: Colors.amber),
                    ]),
                    BarChartGroupData(x: 4, barRods: [
                      BarChartRodData(fromY: 0, toY: 8, width: 15, color: Colors.indigo),
                    ]),
                    BarChartGroupData(x: 5, barRods: [
                      BarChartRodData(fromY: 0, toY: 5, width: 15, color: Colors.amber),
                    ]),
                  ],
                  )),
            ),

🚀やってみたこと

外国の記事を参考にいい感じの棒グラフを作れたので自分のメモ用ですけど記事にすることにしました。気分を可視化するグラフをイメージして作ってみました。

Example Code:

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bar Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Column(
          children: [
            Expanded(
              child: BarChart(BarChartData(
                  borderData: FlBorderData(
                      border: const Border(
                    top: BorderSide.none,
                    right: BorderSide.none,
                    left: BorderSide(width: 1),
                    bottom: BorderSide(width: 1),
                  )),
                  groupsSpace: 10,
                  barGroups: [
                    BarChartGroupData(x: 1, barRods: [
                      BarChartRodData(fromY: 0, toY: 4, width: 15, color: Colors.amber),
                    ]),
                    BarChartGroupData(x: 2, barRods: [
                      BarChartRodData(fromY: 0, toY: 7, width: 15, color: Colors.indigo),
                    ]),
                    BarChartGroupData(x: 3, barRods: [
                      BarChartRodData(fromY: 0, toY: 10, width: 15, color: Colors.amber),
                    ]),
                    BarChartGroupData(x: 4, barRods: [
                      BarChartRodData(fromY: 0, toY: 8, width: 15, color: Colors.indigo),
                    ]),
                    BarChartGroupData(x: 5, barRods: [
                      BarChartRodData(fromY: 0, toY: 5, width: 15, color: Colors.amber),
                    ]),
                  ],
                  )),
            ),
            const SizedBox(height: 5),
            const Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('1. 喜び'),
                Text('2. 悲しみ'),
                Text('3. 怒り'),
                Text('4. 驚き'),
                Text('5. 恐れ'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

サンプルを実行するコード:

main.dart

import 'package:flutter/material.dart';
import 'package:widget_cookbook/fl_chart_example/fl_chart_example.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: BarChartExample(),
    );
  }
}

できた🙌

🙂最後に

グラフを使ったアプリって多いので、もし作るのならLIKE数が多い　fl_chartを使うと便利ですよ。もっと良いパッケージがあるかもしれないですが...

FlutterよりもSwift, Kotlinで作った方が持って多機能なカッコいいグラフは作れたりするようです。

参考になった海外のサイト

🤔やってみたいこと

🚀やってみたこと

🙂最後に

Discussion