Flutter로 간단한 메모 앱 만들기: 로컬 데이터 저장까지!

안녕하세요! 이번에는 Flutter로 메모 앱을 만들어볼 거예요. 메모 앱은 텍스트를 입력하고 저장하며, 수정 및 삭제할 수 있는 간단한 구조로 되어 있어 초보자도 쉽게 따라할 수 있습니다. 이번 프로젝트에서는 ListView, TextEditingController, 그리고 로컬 데이터 저장을 활용해 앱의 기본 기능을 구현합니다.

 

목차

1. 메모 앱 개요
2. Flutter에서 메모 추가 기능 구현하기
3. 로컬 데이터 저장: SharedPreferences 활용
4. Flutter 초보자의 시행착오
5. 다음 단계: 더 발전된 메모 앱 만들기

 

 

1. 메모 앱 개요

목표 기능

• 사용자가 메모를 작성하고 저장할 수 있다.
• 저장된 메모를 리스트로 표시한다.
• 메모를 수정 및 삭제할 수 있다.
• 앱을 종료해도 메모가 유지된다.

 

 

2. Flutter에서 메모 추가 기능 구현하기

실행 가능한 코드: 메모 리스트 기본 구조

import 'package:flutter/material.dart';

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

class MemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MemoScreen(),
    );
  }
}

class MemoScreen extends StatefulWidget {
  @override
  _MemoScreenState createState() => _MemoScreenState();
}

class _MemoScreenState extends State<MemoScreen> {
  final List<String> _memos = []; // 메모 리스트
  final TextEditingController _controller = TextEditingController();

  void _addMemo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _memos.add(_controller.text);
        _controller.clear();
      });
    }
  }

  void _deleteMemo(int index) {
    setState(() {
      _memos.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("메모 앱")),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      labelText: "메모를 입력하세요",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addMemo,
                  child: Text("추가"),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _memos.length,
              itemBuilder: (context, index) {
                return Card(
                  margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                  child: ListTile(
                    title: Text(_memos[index]),
                    trailing: IconButton(
                      icon: Icon(Icons.delete),
                      onPressed: () => _deleteMemo(index),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

주요 기능 설명

1. 메모 추가
   • 사용자가 입력한 텍스트를 리스트에 추가하고, 입력 필드를 초기화.
2. 메모 삭제
   • 특정 메모를 길게 누르거나 삭제 아이콘을 눌러 리스트에서 제거.
3. ListView 사용
   • 메모를 스크롤 가능한 리스트 형태로 화면에 표시.

 

 

3. 로컬 데이터 저장: SharedPreferences 활용

SharedPreferences 설치

1. pubspec.yaml에 추가:
2. dependencies: shared_preferences: ^2.3.5
3. 설치 명령어 실행:
4. flutter pub get

메모 저장 및 로드 기능 추가

import 'package:shared_preferences/shared_preferences.dart';

class _MemoScreenState extends State<MemoScreen> {
  final List<String> _memos = [];
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _loadMemos();
  }

  Future<void> _loadMemos() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _memos.addAll(prefs.getStringList('memos') ?? []);
    });
  }

  Future<void> _saveMemos() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setStringList('memos', _memos);
  }

  void _addMemo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _memos.add(_controller.text);
        _controller.clear();
      });
      _saveMemos();
    }
  }

  void _deleteMemo(int index) {
    setState(() {
      _memos.removeAt(index);
    });
    _saveMemos();
  }

  // 나머지 코드 동일
}

주요 변경점

• SharedPreferences로 데이터 저장: _saveMemos() 호출 시 현재 메모를 로컬에 저장.
• 앱 실행 시 데이터 로드: _loadMemos()를 통해 저장된 메모를 불러와 표시.

 

 

4. Flutter 초보자의 시행착오

1. 데이터 저장 누락 문제
   • 메모 삭제 후 SharedPreferences에 저장하지 않아 데이터가 유지되지 않는 문제가 있었음.
   • 해결: _deleteMemo 함수에서 _saveMemos 호출 추가.
2. SharedPreferences 비동기 처리 문제
   • 비동기로 데이터를 로드하면서 UI가 깜빡이는 문제가 발생.
   • 해결: setState를 사용해 UI를 한 번에 갱신.

5. 다음 단계: 더 발전된 메모 앱 만들기

• 메모 수정 기능 추가
  • 메모를 길게 누르면 수정할 수 있도록 다이얼로그 표시.
• 카테고리별 메모 분류
  • 사용자가 메모를 카테고리별로 분류하여 저장 및 표시.
• 다크모드 지원
  • 앱의 테마를 변경할 수 있는 다크모드 기능 추가.

 

 

마무리

Flutter로 간단한 메모 앱을 만들어보며 로컬 데이터 저장과 상태 관리를 배웠습니다. 메모 앱은 기본적인 기능을 구현하면서 Flutter의 중요한 개념을 익히기에 좋은 프로젝트입니다.

완료하고 나니 할일 추가(ToDo) 와 비슷했죠? 거기다 로컬 저장 기능까지 추가한 내용이었네요 : )

혹시 이 프로젝트를 진행하며 궁금한 점이나 아이디어가 있다면 댓글로 공유해주세요!

다음에는 더 재미있고 유익한 프로젝트로 돌아오겠습니다. 😊