Flutter에서 fl_chart 및 Back4App으로 데이터 시각화하는 방법

소개 데이터 시각화는 현대 애플리케이션의 중요한 측면으로, 사용자가 직관적인 그래프와 차트를 통해 복잡한 데이터를 이해하는 데 도움을 줍니다 이 튜토리얼에서는 fl chart 패키지를 사용하여 flutter 애플리케이션에서 상호작용적이고 시각적으로 매력적인 차트를 만드는 방법을 배웁니다 또한, 차트를 위한 데이터를 저장하고 검색하기 위해 parse server 기반의 백엔드 서비스(baas) 플랫폼인 back4app을 통합할 것입니다 이 튜토리얼이 끝나면, 다양한 차트 유형(선, 막대, 원형 차트 등)을 사용하여 back4app에서 가져온 동적 데이터를 표시하는 완전한 기능의 flutter 앱을 갖게 될 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 a back4app 계정 계정이 없으신 경우, back4app https //www back4app com/ 에서 무료 계정에 가입할 수 있습니다 flutter sdk 가 로컬 머신에 설치되어 있어야 합니다 운영 체제에 맞는 공식 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따라 설치할 수 있습니다 dart 및 flutter에 대한 기본 지식 flutter가 처음이라면, flutter 문서 https //flutter dev/docs 를 검토하여 기본 사항을 익히는 것이 좋습니다 flutter용 parse server sdk 가 프로젝트에 추가되어야 합니다 설정 방법은 back4app flutter sdk 가이드 https //www back4app com/docs/flutter/parse flutter sdk 를 따라 배울 수 있습니다 ide 또는 텍스트 편집기 (예 visual studio code 또는 android studio) 1단계 – back4app 백엔드 설정 이 단계에서는 새로운 back4app 애플리케이션을 만들고 차트 데이터를 저장할 데이터 클래스를 설정합니다 1 1 새로운 back4app 애플리케이션 만들기 귀하의 back4app 대시보드 https //dashboard back4app com/ 에 로그인합니다 "새 앱 만들기"를 클릭합니다 애플리케이션 이름을 입력합니다 예 "flutterchartapp" , 그리고 "생성" 을 클릭합니다 1 2 데이터 모델 설정 애플리케이션 대시보드에서 왼쪽 사이드바의 "데이터베이스" 섹션으로 이동합니다 페이지 상단에서 "클래스 생성" 을 클릭합니다 나타나는 모달에서 "사용자 정의" 을 선택합니다 클래스 이름으로 "salesdata" 를 입력합니다 "클래스 생성" 을 클릭합니다 1 3 클래스에 열 추가 "salesdata" 클래스에서 "+" 를 클릭하여 새 열을 추가합니다 다음 열을 추가합니다 월 유형 문자열 판매 유형 숫자 이제 데이터 모델이 월별 판매 데이터를 저장하도록 설정되었습니다 이 데이터를 flutter 앱에서 시각화할 것입니다 2단계 – 샘플 데이터로 데이터베이스 채우기 앱에서 데이터를 가져오기 전에 back4app 데이터베이스에 샘플 데이터가 필요합니다 여전히 "salesdata" 클래스에서 "+" 를 클릭하여 새 행을 추가합니다 다음 샘플 데이터를 입력합니다 위 단계를 반복하여 모든 샘플 데이터 항목을 추가합니다 3단계 – flutter 프로젝트 설정 이 단계에서는 새로운 flutter 프로젝트를 생성하고 필요한 종속성을 추가합니다 3 1 새로운 flutter 프로젝트 생성 터미널을 열고 다음을 실행하세요 flutter create flutter chart app 프로젝트 디렉토리로 이동하세요 cd flutter chart app 3 2 pubspec yaml 에 종속성 추가 pubspec yaml 을 열고 다음 종속성을 추가하세요 dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 실행 flutter pub get 패키지를 설치합니다 4단계 – flutter 앱에서 parse 초기화하기 flutter 앱을 back4app과 연결하려면 parse sdk를 초기화해야 합니다 4 1 back4app 애플리케이션 자격 증명 얻기 back4app 대시보드에서 "앱 설정" > "보안 및 키" 로 이동합니다 당신의 애플리케이션 id 와 클라이언트 키 를 기록해 두세요 4 2 main dart 에서 parse 초기화하기 열기 lib/main dart 그리고 다음과 같이 수정합니다 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file in the next step void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'flutter chart app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } 'your application id'를 'your application id' 및 'your client key' 를 back4app에서 얻은 자격 증명으로 교체하십시오 5단계 – back4app에서 데이터 가져오기 이 단계에서는 parse sdk를 사용하여 back4app에서 판매 데이터를 가져옵니다 5 1 home page dart 새 파일 lib/home page dart 를 만들고 다음 코드를 추가하십시오 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ fl chart/fl chart dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class salesdata { final string month; final double sales; salesdata(this month, this sales); } class homepagestate extends state\<homepage> { list\<salesdata> chartdata = \[]; @override void initstate() { super initstate(); fetchsalesdata(); } future\<void> fetchsalesdata() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('salesdata')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { chartdata = apiresponse results! map((data) { final month = data get\<string>('month') ?? ''; final sales = data get\<num>('sales')? todouble() ?? 0 0; return salesdata(month, sales); }) tolist(); }); } else { // handle errors print('error fetching data ${apiresponse error? message}'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('sales chart'), ), body chartdata isempty ? center(child circularprogressindicator()) padding( padding const edgeinsets all(16 0), child linechart( linechartdata( miny 0, maxy 250, titlesdata fltitlesdata( lefttitles axistitles( sidetitles sidetitles(showtitles true), ), bottomtitles axistitles( sidetitles sidetitles( showtitles true, gettitleswidget bottomtitlewidgets, interval 1, ), ), ), griddata flgriddata(show true), borderdata flborderdata( show true, border border all(color colors grey), ), linebarsdata \[ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], dotdata fldotdata(show true), ), ], ), ), )); } widget bottomtitlewidgets(double value, titlemeta meta) { const style = textstyle( fontsize 12, ); widget text; int index = value toint(); if (index >= 0 && index < chartdata length) { text = text(chartdata\[index] month substring(0, 3), style style); } else { text = text('', style style); } return sidetitlewidget( axisside meta axisside, child text, ); } } 설명 salesdata class 월 및 판매 데이터를 보유하기 위한 간단한 모델 클래스입니다 fetchsalesdata() salesdata 클래스에서 데이터를 가져와서 chartdata 목록을 업데이트합니다 linechart 가져온 데이터를 기반으로 fl chart 를 사용하여 선 차트를 생성합니다 bottomtitlewidgets() 하단 축 레이블을 사용자 정의하여 월 약어를 표시합니다 6단계 – 앱 실행 프론트엔드와 백엔드를 설정했으니, 이제 앱을 실행할 시간입니다 터미널에서 프로젝트 디렉토리로 이동합니다 다음 명령어로 앱을 실행합니다 flutter run 각 월의 판매 데이터를 표시하는 선 차트를 볼 수 있어야 합니다 7단계 – 상호작용 및 사용자 정의 추가 차트를 더 상호작용적이고 시각적으로 매력적으로 만들기 위해 추가로 사용자 정의할 수 있습니다 7 1 차트 외관 사용자 정의 당신의 linechartbardata 를 build 메서드에서 수정하세요 linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], belowbardata barareadata( show true, colors \[colors blue withopacity(0 3)], ), dotdata fldotdata( show true, ), ) belowbardata 선 아래에 채워진 영역을 추가합니다 dotdata 각 데이터 포인트에 점을 표시합니다 7 2 터치 상호작용 활성화 툴팁을 표시하기 위해 터치 상호작용을 활성화할 수 있습니다 다음 내용을 linechartdata 에 추가하세요 touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), 8단계 – 다양한 차트 유형 표시 또한 fl chart 를 사용하여 다른 유형의 차트를 표시할 수 있습니다 8 1 파이 차트 예제 당신의 linechart 를 build 메서드에서 piechart 로 교체하세요 piechart( piechartdata( sections chartdata map((data) { return piechartsectiondata( value data sales, title data month substring(0, 3), color colors primaries\[chartdata indexof(data) % colors primaries length], ); }) tolist(), sectionsspace 2, centerspaceradius 40, ), ) piechartsectiondata 파이 차트의 각 섹션을 정의합니다 결론 이 튜토리얼에서는 fl chart 패키지를 사용하여 flutter 애플리케이션에서 데이터를 시각화하는 방법을 배웠습니다 parse sdk를 사용하여 데이터를 저장하고 검색하기 위해 back4app을 백엔드 솔루션으로 통합했습니다 back4app에서 데이터를 가져오고 다양한 차트 유형을 사용하여 표시함으로써 이제 flutter 앱에서 동적이고 인터랙티브한 데이터 시각화를 구축할 수 있습니다 애플리케이션을 더욱 향상시키기 위해 fl chart , 막대 차트 및 레이더 차트와 같은 다른 차트 유형을 탐색해 보세요 또한 back4app의 실시간 쿼리를 통합하여 실시간 데이터 업데이트를 구현할 수 있습니다 추가 리소스 back4app 문서 https //www back4app com/docs pub dev의 fl chart 패키지 https //pub dev/packages/fl chart flutter 가이드용 parse sdk https //docs parseplatform org/flutter/guide/ flutter 공식 문서 https //flutter dev/docs 'your application id' 및 'your client key' 와 같은 자리 표시자 값을 실제 back4app 자격 증명으로 바꾸는 것을 잊지 마세요 즐거운 코딩 되세요!