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

24min
소개
데이터 시각화는 현대 애플리케이션의 중요한 측면으로, 사용자가 직관적인 그래프와 차트를 통해 복잡한 데이터를 이해하는 데 도움을 줍니다. 이 튜토리얼에서는 fl_chart 패키지를 사용하여 Flutter 애플리케이션에서 상호작용적이고 시각적으로 매력적인 차트를 만드는 방법을 배웁니다. 또한, 차트를 위한 데이터를 저장하고 검색하기 위해 Parse Server 기반의 백엔드 서비스(BaaS) 플랫폼인 Back4App을 통합할 것입니다. 이 튜토리얼이 끝나면, 다양한 차트 유형(선, 막대, 원형 차트 등)을 사용하여 Back4App에서 가져온 동적 데이터를 표시하는 완전한 기능의 Flutter 앱을 갖게 될 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
A Back4App 계정. 계정이 없으신 경우, Back4App에서 무료 계정에 가입할 수 있습니다.
Flutter SDK가 로컬 머신에 설치되어 있어야 합니다. 운영 체제에 맞는 공식 Flutter 설치 가이드를 따라 설치할 수 있습니다.
Dart 및 Flutter에 대한 기본 지식. Flutter가 처음이라면, Flutter 문서를 검토하여 기본 사항을 익히는 것이 좋습니다.
Flutter용 Parse Server SDK가 프로젝트에 추가되어야 합니다. 설정 방법은 Back4App Flutter SDK 가이드를 따라 배울 수 있습니다.
IDE 또는 텍스트 편집기(예: Visual Studio Code 또는 Android Studio)
1단계 – Back4App 백엔드 설정
이 단계에서는 새로운 Back4App 애플리케이션을 만들고 차트 데이터를 저장할 데이터 클래스를 설정합니다.
1.1. 새로운 Back4App 애플리케이션 만들기
귀하의 Back4App 대시보드에 로그인합니다.
"새 앱 만들기"를 클릭합니다.
애플리케이션 이름을 입력합니다. 예: "FlutterChartApp", 그리고 "생성"을 클릭합니다.
1.2. 데이터 모델 설정
애플리케이션 대시보드에서 왼쪽 사이드바의 "데이터베이스" 섹션으로 이동합니다.
페이지 상단에서 "클래스 생성"을 클릭합니다.
나타나는 모달에서:
"사용자 정의"을 선택합니다.
클래스 이름으로 "SalesData"를 입력합니다.
"클래스 생성"을 클릭합니다.
1.3. 클래스에 열 추가
"SalesData" 클래스에서 "+"를 클릭하여 새 열을 추가합니다.
다음 열을 추가합니다:
월: 유형 문자열
판매: 유형 숫자
이제 데이터 모델이 월별 판매 데이터를 저장하도록 설정되었습니다. 이 데이터를 Flutter 앱에서 시각화할 것입니다.
2단계 – 샘플 데이터로 데이터베이스 채우기
앱에서 데이터를 가져오기 전에 Back4App 데이터베이스에 샘플 데이터가 필요합니다.
여전히 "SalesData" 클래스에서 "+"를 클릭하여 새 행을 추가합니다.
다음 샘플 데이터를 입력합니다:
위 단계를 반복하여 모든 샘플 데이터 항목을 추가합니다.
3단계 – Flutter 프로젝트 설정
이 단계에서는 새로운 Flutter 프로젝트를 생성하고 필요한 종속성을 추가합니다.
3.1. 새로운 Flutter 프로젝트 생성
터미널을 열고 다음을 실행하세요:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
프로젝트 디렉토리로 이동하세요:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. pubspec.yaml에 종속성 추가
 pubspec.yaml을 열고 다음 종속성을 추가하세요:
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
﻿
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 그리고 다음과 같이 수정합니다:
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(),
    );
  }
}
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를 만들고 다음 코드를 추가하십시오:
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,
    );
  }
}
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단계 – 앱 실행
프론트엔드와 백엔드를 설정했으니, 이제 앱을 실행할 시간입니다.
터미널에서 프로젝트 디렉토리로 이동합니다.
다음 명령어로 앱을 실행합니다:
Bash
flutter run
flutter run
﻿
각 월의 판매 데이터를 표시하는 선 차트를 볼 수 있어야 합니다.
7단계 – 상호작용 및 사용자 정의 추가
차트를 더 상호작용적이고 시각적으로 매력적으로 만들기 위해 추가로 사용자 정의할 수 있습니다.
7.1. 차트 외관 사용자 정의
당신의 LineChartBarData를 build 메서드에서 수정하세요:
Dart
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,
  ),
)
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:에 추가하세요.
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
8단계 – 다양한 차트 유형 표시
또한 fl_chart를 사용하여 다른 유형의 차트를 표시할 수 있습니다.
8.1. 파이 차트 예제
당신의 LineChart를 build 메서드에서 PieChart:로 교체하세요.
Dart
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,
  ),
)
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 문서﻿
﻿pub.dev의 fl_chart 패키지﻿
﻿Flutter 가이드용 Parse SDK﻿
﻿Flutter 공식 문서﻿
'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY'와 같은 자리 표시자 값을 실제 Back4App 자격 증명으로 바꾸는 것을 잊지 마세요. 즐거운 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter, 캐주얼 게임 툴킷 및 Back4app을 사용하여 고급 엔드리스 러너 게임을 만드는 방법
Flutter에서 Back4App의 Parse를 사용한 타사 인증 완벽 가이드