다이어리 만들기

달력이 해당일에 기록된 이벤트를 불러오는 조건을 만드는 게 까다로웠다

우선 table_calender 라이브러리에서 예제 코드를 적극 활용해봤다 여러 번 테스트해본 결과

어떻게 구동하는 건지 실마리가 보여 당장 숙제로 넘어와서 이것저것 만져봤다

이벤트 목록을 만들기 위해 List를 활용해서 데이터를 쌓아주는 것까지 생각이 나는데 이걸 달력에 표시하기 위해

마지막엔 배열 형태로 리턴을 해야 달력에 표시가 돼더라

근데 이벤트가 있는 날짜와 달력 날짜를 조회해서 데이터를 가져와야 하는데 이걸 어떻게 해야 할지 모르겠다 답답했다

일단 내가 하는 지식 내에서 해결해 보려고 했지만 실패 숙제 영상을 보고 where함수를 쓰는데 이걸 왜 쓰는지 이유는 없더라 걍 단순 조건문 필터링하는 거라는데 그럼 for, forEach 문을 쓰면 될 것 같은데 이걸 왜 안 쓰는 걸까???

자바스크립트 공식문서로 가서 좀 더 자세한 이유를 찾기 위해~(참고 : 구글 웹 개발진이 dart언어로 넘어와서 만들었다고 한다 그래서 자바스크립트와 비슷한게 많다 )

찾아서 결론 내린 바로는 for, forEach 같은 조건문은 void 타입이라 return 값이 없다

이 return을 해주냐 안 해주냐의 차이 같다

where함수는 조건에 맞는 값을 return 해 주기 때문에 where(). toList() 트와 같이 List타입으로 체인 메서드 사용이

가능했다 

이번 달력 CRUD 기능 구현은 어려웠다 반복해서 다시 만들어 봐야겠다

 

[ main.dart ]

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'diary_service.dart';
import 'home_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences prefs = await SharedPreferences.getInstance();
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => DiaryService(prefs)),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

[ home_page.dart ]

import 'package:diary/diary_service.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:table_calendar/table_calendar.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  DateTime selectedDate = DateTime.now();
  TextEditingController updateTextController = TextEditingController();
  //DateTime _focusedDay =
  @override
  Widget build(BuildContext context) {
    return Consumer<DiaryService>(
      builder: (context, diaryService, child) {
        List<Diary> diaryList = diaryService.getByDate(selectedDate);
        return Scaffold(
          body: SafeArea(
            child: Column(
              children: [
                TableCalendar(
                  firstDay: DateTime.utc(2010, 10, 16),
                  lastDay: DateTime.utc(2030, 3, 14),
                  focusedDay: DateTime.now(),
                  selectedDayPredicate: (day) {
                    return isSameDay(selectedDate, day);
                  },
                  onDaySelected: (_, focusedDay) {
                    setState(() {
                      selectedDate = focusedDay;
                      // _focusedDay = focusedDay; // update `_focusedDay` here as well
                    });
                  },
                  eventLoader: (date) {
                    return diaryService.getByDate(date);
                  },
                ),
                Divider(),
                Expanded(
                  child: ListView.builder(
                    itemCount: diaryList.length,
                    itemBuilder: (context, index) {
                      Diary diary = diaryList[index];
                      return ListTile(
                        title: Text(diary.text),
                        trailing: Text(
                          DateFormat('kk:mm').format(diary.createdAt),
                        ),
                        onTap: () {
                          showDialog(
                            context: context,
                            builder: (context) {
                              updateTextController.text = diary.text;

                              return AlertDialog(
                                title: Text('일기 수정'),
                                content: TextField(
                                  onSubmitted: (text) {
                                    //자판에서 완료 버튼 클릭시 작동
                                    if (text.isNotEmpty) {
                                      diaryService.update(
                                          diary.createdAt, text);
                                    }
                                    Navigator.pop(context);
                                  },
                                ),
                              );
                            },
                          );
                        },
                        onLongPress: () {
                          showDialog(
                            context: context,
                            builder: (context) {
                              return AlertDialog(
                                title: Text('일기 삭제'),
                                content: Text('${diary.text} 삭제를 하시겠습니까?'),
                                actions: [
                                  TextButton(
                                    onPressed: () {},
                                    child: Text('취소'),
                                  ),
                                  TextButton(
                                    onPressed: () {
                                      diaryService.delete(diary.createdAt);
                                      Navigator.pop(context);
                                    },
                                    child: Text('삭제'),
                                  ),
                                ],
                              );
                            },
                          );
                        },
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.create),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text('일기 작성'),
                    content: TextField(
                      onSubmitted: (text) {
                        //자판에서 완료 버튼 클릭시 작동
                        if (text.isNotEmpty) {
                          diaryService.create(text, selectedDate);
                        }
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
              );
            },
          ),
        );
      },
    );
  }
}

 

[ diary_service.dart ]

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:table_calendar/table_calendar.dart';

class Diary {
  String text; // 내용
  DateTime createdAt; // 작성 시간

  Diary({
    required this.text,
    required this.createdAt,
  });

  Map<String, dynamic> toJson() {
    //json 형태와 비슷한 Map형태로 변환
    return {
      'text': text,
      'creacteAt': createdAt.toString(),
    };
  }

  factory Diary.fromJson(Map<String, dynamic> jsonMap) {
    //Diary 객체로 변환
    return Diary(
      text: jsonMap['text'],
      createdAt: DateTime.parse(jsonMap['creactAt']),
    );
  }
}

class DiaryService extends ChangeNotifier {
  SharedPreferences prefs;
  DiaryService(this.prefs) {
    List<String> stringDiaryList = prefs.getStringList('diaryList') ?? [];
    for (String stringDiary in stringDiaryList) {
      Map<String, dynamic> jsonMap = jsonDecode(stringDiary);
      Diary diary = Diary.fromJson(jsonMap);
      diaryList.add(diary);
    }
  }

  /// Diary 목록
  List<Diary> diaryList = [];

  /// 특정 날짜의 diary 조회
  List<Diary> getByDate(DateTime date) {
    //where 함수(return이 가능한 함수 / foreach, for, for in 조건 반복문이긴 하나 return 사용 못함) -> 해당 조건에 맞는건만 필터링
    return diaryList
        .where((diaryElement) => isSameDay(date, diaryElement.createdAt))
        .toList();
  }

  /// Diary 작성
  void create(String text, DateTime selectedDate) {
    DateTime now = DateTime.now();
    //이벤트 작성일 객체 생성
    DateTime createdAt = DateTime(selectedDate.year, selectedDate.month,
        selectedDate.day, now.hour, now.minute, now.second);
    Diary diary = Diary(text: text, createdAt: createdAt);
    diaryList.add(diary);
    notifyListeners();
    _saveDiaryList();
  }

  /// Diary 수정
  void update(DateTime createdAt, String newContent) {
    Diary diary = diaryList
        .firstWhere((diaryelement) => diaryelement.createdAt == createdAt);
    diary.text = newContent;
    notifyListeners();
    _saveDiaryList();
  }

  /// Diary 삭제
  void delete(DateTime createdAt) {
    diaryList
        .removeWhere((diaryelement) => diaryelement.createdAt == createdAt);
    notifyListeners();
    _saveDiaryList();
  }

  void _saveDiaryList() {
    List<String> stringDiaryList = [];
    for (Diary diary in diaryList) {
      Map<String, dynamic> jsonMap = diary.toJson();
      String stringDiary = jsonEncode(jsonMap);
      stringDiaryList.add(stringDiary);
    }
    prefs.setStringList('diaryList', stringDiaryList);
  }
}