[flutter] 플러터(expandable)을 사용하는 가계부 및 금융 앱 개발 방법

04 Dec 2023

flutter

소개

이번 프로젝트에서는 Flutter의 expandable 패키지를 사용하여 가계부 및 금융 앱을 개발하는 방법에 대해 알아보겠습니다. expandable 패키지는 UI를 확장 가능하게 만들어주는 편리한 도구입니다. 이를 사용하여 사용자가 손쉽게 가계부를 작성하고 금융 관련 기능을 활용할 수 있습니다.

설정

먼저 Flutter 환경이 설치되어 있어야 합니다. Flutter 공식 사이트에서 설치 가이드를 확인하고 설정을 완료하세요.

expandable 패키지를 사용하기 위해 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

dependencies:
  expandable: ^4.1.4

의존성을 추가한 후, flutter pub get 명령어를 실행하여 패키지를 설치합니다.

UI 디자인

가계부 및 금융 앱의 UI를 디자인할 때, expandable 패키지를 사용하여 확장 가능한 위젯을 만들 수 있습니다. 아래는 예시 코드입니다.

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

class ExpensePage extends StatefulWidget {
  @override
  _ExpensePageState createState() => _ExpensePageState();
}

class _ExpensePageState extends State<ExpensePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('가계부'),
      ),
      body: SingleChildScrollView(
        child: ExpandablePanel(
          header: Text('일일 지출'),
          expanded: Column(
            children: [
              Text('항목 1'),
              Text('항목 2'),
              Text('항목 3'),
            ],
          ),
        ),
      ),
    );
  }
}

위 예시 코드에서는 가계부 페이지를 생성하고, expandable 패키지를 사용하여 일일 지출 항목을 확장 가능한 패널로 구성하였습니다. 사용자가 패널을 터치하면 항목이 펼쳐지고, 다시 터치하면 항목이 접히게 됩니다.

가계부 기능

가계부 앱에는 사용자가 매일 지출한 내역을 기록하는 기능이 필요합니다. expandable 패키지를 사용하여 사용자가 특정 날짜를 선택해 가계부를 작성할 수 있도록 할 수 있습니다. 예를 들어, 다음과 같이 DatePicker를 포함한 폼을 디자인할 수 있습니다.

class ExpenseForm extends StatefulWidget {
  @override
  _ExpenseFormState createState() => _ExpenseFormState();
}

class _ExpenseFormState extends State<ExpenseForm> {
  DateTime selectedDate;

  Future<void> _selectDate() async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime(2022),
    );
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton(
          onPressed: _selectDate,
          child: Text('날짜 선택'),
        ),
        SizedBox(height: 20),
        selectedDate != null
            ? Text('Selected date: $selectedDate')
            : Text('날짜가 선택되지 않았습니다.'),
      ],
    );
  }
}

위 예시에서는 사용자가 날짜를 선택할 수 있는 버튼을 생성하고, 선택한 날짜를 화면에 표시합니다.

금융 기능

금융 앱에는 사용자의 지출 내역을 분석하여 통계를 제공하는 기능이 필요합니다. expandable 패키지와 함께 다른 금융 관련 패키지를 사용하여 사용자의 지출 내역을 분석하고 통계를 생성할 수 있습니다. 예를 들어, 다음과 같이 charts_flutter 패키지를 사용하여 원형 그래프를 생성할 수 있습니다.

import 'package:charts_flutter/flutter.dart' as charts;

class ExpenseStatistics extends StatefulWidget {
  @override
  _ExpenseStatisticsState createState() => _ExpenseStatisticsState();
}

class _ExpenseStatisticsState extends State<ExpenseStatistics> {
  List<charts.Series> seriesList;

  @override
  void initState() {
    super.initState();
    seriesList = _createSampleData();
  }

  List<charts.Series<ExpenseCategory, String>> _createSampleData() {
    final data = [
      ExpenseCategory('식비', 500000),
      ExpenseCategory('교통비', 200000),
      ExpenseCategory('문화생활', 100000),
      ExpenseCategory('기타', 300000),
    ];

    return [
      charts.Series<ExpenseCategory, String>(
        id: 'Category',
        domainFn: (ExpenseCategory category, _) => category.name,
        measureFn: (ExpenseCategory category, _) => category.amount,
        data: data,
        labelAccessorFn: (ExpenseCategory category, _) =>
            '${category.name}: ${category.amount}',
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: charts.PieChart(
        seriesList,
        animate: true,
      ),
    );
  }
}

class ExpenseCategory {
  final String name;
  final int amount;

  ExpenseCategory(this.name, this.amount);
}

위 예시에서는 사용자의 지출 내역을 각 카테고리별로 분류한 후, 원형 그래프로 시각화합니다.

결론

Flutter의 expandable 패키지를 사용하면 가계부 및 금융 앱을 개발하는 것이 더욱 간편해집니다. expandable을 활용하여 사용자 친화적인 UI를 구성하고, 다른 금융 관련 패키지를 통해 추가적인 기능을 개발할 수 있습니다. 이를 통해 사용자는 편리하게 가계부를 작성하고 금융 상황을 파악할 수 있습니다.

목차

소개

설정

UI 디자인

가계부 기능

금융 기능

결론