[flutter] 스크롤바를 사용하여 그래프 구현하기

11 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter) 앱에서 스크롤바와 그래프를 함께 사용하는 방법에 대해 알아보겠습니다. 스크롤바를 통해 그래프를 스크롤하여 사용자가 그래프 전체를 쉽게 탐색할 수 있게 됩니다.

1. 그래프 라이브러리 선택

우선, 플러터에서 그래프를 그리기 위한 라이브러리를 선택해야 합니다. flutter_chart나 syncfusion_flutter_charts와 같은 라이브러리를 사용할 수 있습니다. 이 라이브러리들은 다양한 그래프 유형을 지원하며, 터치 및 축소/확대 기능을 제공하여 사용자가 그래프를 상호 작용할 수 있게 해줍니다.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() => runApp(ScrollbarGraphApp());

class ScrollbarGraphApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scrollbar Graph Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrollbar Graph'),
        ),
        body: Center(
          child: Scrollbar(
            isAlwaysShown: true,
            controller: _scrollController,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              controller: _scrollController,
              child: SfCartesianChart(
                // Add chart properties here
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제 코드에서는 syncfusion_flutter_charts를 사용하여 그래프를 그리고, Scrollbar와 SingleChildScrollView 위젯을 사용하여 수평으로 스크롤할 수 있는 그래프를 생성합니다.

2. 스크롤바 추가

이제 Scrollbar 위젯을 사용하여 스크롤바를 추가합니다. Scrollbar 위젯은 스크롤이 가능한 위젯을 감싸 스크롤바를 표시할 수 있게 해줍니다.

Scrollbar(
  isAlwaysShown: true, // 항상 스크롤바를 표시
  controller: _scrollController, // 스크롤 컨트롤러 지정
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal, // 가로 방향 스크롤
    controller: _scrollController, // 스크롤 컨트롤러 지정
    child: SfCartesianChart(
      // Add chart properties here
    ),
  ),
)

isAlwaysShown 속성은 항상 스크롤바를 표시할지 여부를 지정하며, _scrollController를 사용하여 스크롤 위치를 제어합니다.

3. 핵심 속성 추가

마지막으로, 그래프에 필요한 핵심 속성을 추가합니다. 각 라이브러리마다 다르지만, 데이터 소스, 시리즈 유형, 축 구성 등을 설정하여 그래프를 완성합니다.

SfCartesianChart(
  title: ChartTitle(text: 'Graph with Scrollbar'),
  primaryXAxis: CategoryAxis(),
  series: <ChartSeries>[
    LineSeries<_ChartData, String>(
      dataSource: chartData,
      xValueMapper: (_ChartData sales, _) => sales.x,
      yValueMapper: (_ChartData sales, _) => sales.y,
    ),
  ],
)

이제 스크롤바를 사용하여 그래프를 만들어 보았습니다. 사용자는 스크롤을 통해 그래프를 전체적으로 볼 수 있으면서도 세부 데이터까지 쉽게 확인할 수 있습니다.

플러터에서 그래프와 스크롤바를 함께 사용하여 데이터 시각화를 더욱 효과적으로 할 수 있는 방법에 대해 알아보았습니다. 감사합니다!

참고: syncfusion_flutter_charts 문서