[flutter] 플러터(expandable)을 이용한 가계 관리 및 예산 편집 앱 개발 방법

04 Dec 2023

flutter

소개

이번 포스트에서는 플러터에서 확장 가능한(expandable) 위젯을 이용하여 가계 관리 및 예산 편집 앱을 개발하는 방법에 대해 알아보겠습니다. 확장 가능한 위젯은 사용자가 터치하여 내용을 펼쳐보거나 접어서 보여줄 수 있는 기능을 제공합니다.

1. 플러터 프로젝트 설정

먼저, 플러터 프로젝트를 설정해야 합니다. 다음 명령어를 사용하여 플러터 프로젝트를 생성합니다:

flutter create budget_app
cd budget_app

2. 확장 가능한 위젯 추가

확장 가능한 위젯을 사용하기 위해 expandable 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 expandable 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  expandable: ^5.0.1

저장한 뒤, 다음 명령어를 실행하여 패키지를 설치합니다:

flutter pub get

3. 가계 관리 앱 개발

이제 가계 관리 앱을 개발해보겠습니다. 먼저, main.dart 파일을 열고 기본 앱 구조를 설정합니다:

import 'package:flutter/material.dart';

void main() {
  runApp(BudgetApp());
}

class BudgetApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Budget App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BudgetScreen(),
    );
  }
}

class BudgetScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Budget Management'),
      ),
      body: ListView(
        children: [
          ExpandableWidget(
            title: 'Income',
            content: Text('Your income details will be displayed here.'),
          ),
          ExpandableWidget(
            title: 'Expenses',
            content: Text('Your expense details will be displayed here.'),
          ),
          ExpandableWidget(
            title: 'Budget',
            content: Text('Your budget details will be displayed here.'),
          ),
        ],
      ),
    );
  }
}

class ExpandableWidget extends StatefulWidget {
  final String title;
  final Widget content;

  ExpandableWidget({required this.title, required this.content});

  @override
  _ExpandableWidgetState createState() => _ExpandableWidgetState();
}

class _ExpandableWidgetState extends State<ExpandableWidget> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          title: Text(widget.title),
          onTap: () {
            setState(() {
              _expanded = !_expanded;
            });
          },
          trailing: _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
        ),
        _expanded ? widget.content : SizedBox.shrink(),
      ],
    );
  }
}

위 코드에서 ListView 위젯 안에 여러 개의 ExpandableWidget을 추가하고, 각 위젯의 제목과 내용을 설정합니다. ExpandableWidget은 StatefulWidget으로 구현되어 터치 시 확장/접기 상태를 변경하도록 설계되었습니다.

4. 예산 편집 앱 개발

이제 예산 편집 기능을 추가해보겠습니다. ExpandableWidget의 content에 ListView를 추가하여 예산 항목 목록을 표시합니다. 또한, 각 항목에 대한 편집 기능을 추가합니다. 이를 위해 ExpenseWidget을 추가하고, ExpandableWidget의 content 내부에서 사용합니다:

class BudgetScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Budget Management'),
      ),
      body: ListView(
        children: [
          ExpandableWidget(
            title: 'Income',
            content: Text('Your income details will be displayed here.'),
          ),
          ExpandableWidget(
            title: 'Expenses',
            content: ListView(
              children: [
                ExpenseWidget(title: 'Groceries', amount: '100'),
                ExpenseWidget(title: 'Transportation', amount: '50'),
                ExpenseWidget(title: 'Entertainment', amount: '30'),
              ],
            ),
          ),
          ExpandableWidget(
            title: 'Budget',
            content: Text('Your budget details will be displayed here.'),
          ),
        ],
      ),
    );
  }
}

class ExpenseWidget extends StatelessWidget {
  final String title;
  final String amount;

  ExpenseWidget({required this.title, required this.amount});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      trailing: Text('\$' + amount),
      onTap: () {
        // Handle editing expense
      },
    );
  }
}

위 코드에서 ExpenseWidget은 각 예산 항목을 표시하는 위젯입니다. ListView에 ExpenseWidget을 추가하여 여러 개의 예산 항목을 표시하고, 각 항목의 제목과 금액을 설정합니다. 또한, ExpenseWidget의 onTap 콜백에서 예산 항목을 편집하는 로직을 구현할 수 있습니다.

결론

위의 단계를 따라하면 플러터(expandable)을 이용하여 가계 관리 및 예산 편집 앱을 개발할 수 있습니다. expandable 패키지를 사용하여 확장/접기 기능을 구현하고, 예산 항목을 편집하는 기능을 추가할 수 있습니다. 이를 활용하여 다양한 가계 관리 앱을 개발해보세요!

참고 자료

expandable 패키지