[flutter] BottomSheet에 그래프 추가하는 방법

14 Dec 2023

flutter

Flutter 애플리케이션에 BottomSheet를 사용하여 그래프를 표시하는 방법을 살펴보겠습니다. BottomSheet는 화면 하단에서 나타나는 모달 시트로, 추가 정보나 설정을 표시하기에 적합합니다. 우리는 아래 예제에서 차트 라이브러리를 사용하여 BottomSheet에 그래프를 표시하는 방법을 다룰 것입니다.

차트 라이브러리 추가

먼저, Flutter 애플리케이션에 그래프를 표시하기 위해 차트 라이브러리를 추가해야 합니다. 여러 가지 차트 라이브러리 중 flutter_candlesticks를 사용해보겠습니다.

먼저 pubspec.yaml 파일에 아래와 같이 라이브러리를 추가합니다:

dependencies:
  flutter_candlesticks: ^1.0.0

그런 다음, 터미널에서 flutter pub get 명령어를 사용하여 라이브러리를 다운로드 받습니다.

BottomSheet에 그래프 추가

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomSheet with Graph'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    height: 300,
                    color: Colors.white,
                    child: MyChart(), // Our custom chart widget
                  );
                },
              );
            },
            child: Text('Show Graph'),
          ),
        ),
      ),
    );
  }
}

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new FlutterCandlesticks(
      data: sampleData,
      enableGridLines: true,
      volumeProp: 0.2,
      width: 350.0,
      height: 150.0,
    );
  }
}

List sampleData = [
  {
    'open': 170.0,
    'close': 180.0,
    'low': 160.0,
    'high': 185.0,
    'volumeto': 1234.0,
    'volumefrom': 123.0,
    'date': '2018-01-01',
  },
  // Add more data points as needed
];

위 예제는 showModalBottomSheet 메서드를 사용하여 BottomSheet를 표시하고, 그 내부에 우리가 만든 MyChart 위젯을 추가하여 그래프를 표시하는 방법을 보여줍니다.

이제 당신의 Flutter 애플리케이션에 BottomSheet에 그래프를 추가해보세요!