[Package] fl_chart (그래프 그리기)

Flutter 패키지에서는 그날 흥미롭게 본 패키지를 직접 써보고 짧게 사용기 및 활용방안을 기록하는 공간이다.

---

아무래도 의학과 관련된 일을 하다보니 그래프를 볼 일이 많다. 예전에는 주로 활용성이 높은 버튼이나 화면 구성에 신경이 쓰였다면 요즘에는 그래프를 어떻게 하면 효율적으로 그려서 전달 할 수 있을까 라는 생각을 하게 되었다. 과학하는 사람이라면 한번쯤을 봤을 그래프를 한번 그려볼 수 있는 패키지를 찾아보았다.

 

이번에 써본건 fl_chart이다. 

Likes는 4235에 Popularity는 99%다. 확실히 모바일 어플리케이션에서 그래프를 표현하기에는 아기자기 한 그림들이 많아서 사람들이 많이 사용하는 듯 하다. 아래 배너를 누르면 해당 pub.dev 페이지로 이동한다.

 

코드 작성은 쉬운가?

쉽다. 코드 설명도 쉽게 되어 있고 필요한 부분은 조절할 수 있도록 각 기능의 사용 목적 또한 잘 서술되어 있다. Github에 들어가면 이렇게 긴 예시를 볼 수 있다. 다 읽어봐도 좋지만 필요한 부분한 찾아서 발췌한 다음에 수정하면 된다.

하지만, color라던지 이런 부분은 app_colors.dart와 color_extension.dart 등을 찾아서 원하는 색으로 수정을 해야지 패키지가 의도한 색감과 자기가 의도한 색을 표현할 수 있다. 이 또한 잘 제공하고 있어서 큰 문제는 없었다.

 

@ app_colors.dart

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

class AppColors {
  static const Color primary = contentColorCyan;
  static const Color menuBackground = Color(0xFF090912);
  static const Color itemsBackground = Color(0xFF1B2339);
  static const Color pageBackground = Color(0xFF282E45);
  static const Color mainTextColor1 = Colors.white;
  static const Color mainTextColor2 = Colors.white70;
  static const Color mainTextColor3 = Colors.white38;
  static const Color mainGridLineColor = Colors.white10;
  static const Color borderColor = Colors.white54;
  static const Color gridLinesColor = Color(0x11FFFFFF);

  static const Color contentColorBlack = Colors.black;
  static const Color contentColorWhite = Colors.white;
  static const Color contentColorBlue = Color(0xFF2196F3);
  static const Color contentColorYellow = Color(0xFFFFC300);
  static const Color contentColorOrange = Color(0xFFFF683B);
  static const Color contentColorGreen = Color(0xFF3BFF49);
  static const Color contentColorPurple = Color(0xFF6E1BFF);
  static const Color contentColorPink = Color(0xFFFF3AF2);
  static const Color contentColorRed = Color(0xFFE80054);
  static const Color contentColorCyan = Color(0xFF50E4FF);
}

 

종류는 다양한가?

3개만 존재한다. Line, bar, Pie를 제공 하고 있으며, Scatter과 Radar는 아직 제공하지 않는다. 언제 제공할지는 아직 적혀 있지 않다.

 

그래서 쓸건가?

만약 과학적 그래프를 작성하는데는 조금 한계가 있을 것 같다. 그래프 자체가 좀 가볍기도 하고 종류가 그리 많지 않다. 아마 쓴다면 지출이나 금액을 관리하는 어플이나 주식 어플 이런 쪽으로 사용이 가능할 듯 하다. 혹은 당뇨 관리 앱의 그래프 정도? 아마 선 그래프를 사용한다면 조금 더 날카로운 느낌의 다른 그래프를 사용할 듯 하다. 하지만 바 그래프는 의외로 잘 구현이 되어 있어서 쓸 수도 있을 듯 하다.

 

아래는 본인이 직접 한번 바 그래프 예제를 다운 받아 만들어 보았다. 간단하게 만들 수 있었다.

다음엔 무슨 패키지를 볼까?