달력 위젯 TableCalendar를 사용하여 일정 관리 앱을 만들어 보겠습니다.
table_calendar 플러그인
table_calendar 플러그인은 달력을 쉽게 구현할 수 있게 해주는 플러그인이다. 직접 달력을 구현하기에는 너무 많은 시간이 소요될 것이기 때문에 오픈 소스 플러그인을 사용합니다.
특정 날짜 선택하기, 날짜 기간 선택하기, 현재 화면에 보여지는 날짜 지정하기, 일정 입력하기 등 거의 대부분의 기능을 제공해 준다. 그리고 유연한 디자인 기능을 갖고 있어서 거의 모든 요소를 직접 커스터마이징 할 수 있습니다.
예제 코드 : 달력 플러그인의 대표적 매개변수들
TableCalendar(
// 포커스된 날짜
focusedDay: DateTime.now(),
// 달력의 시작일
firstDay: DateTime.now().subtract(const Duration(days: 365)),
// 달력의 종료일
lastDay: DateTime.now().add(const Duration(days: 365)),
// 선택된 날짜
selectedDayPredicate: (DateTime day){
final now = DateTime.now();
return DateTime(day.year, day.month, day.day) == DateTime(now.year, now.month, now.day);
},
onDaySelected: (DateTime selectDay, DateTime focusedDay) {
// 선택된 날짜를 처리하는 로직
print('Selected day: $selectDay');
},
onPageChanged: (focusedDay) {
// 페이지가 변경될 때의 로직
print('Focused day: $focusedDay');
},
// 범위 선택 모드
rangeSelectionMode: RangeSelectionMode.toggledOff,
onRangeSelected: (start, end, focusedDay) {
// 범위 선택이 변경될 때의 로직
print('Selected range: $start - $end');
},
),
프로젝트 생성 및 플러그인 준비
제가 즐겨쓰는 플러터 프로젝트 생성 명령어 스타일입니다.
% flutter create --org com.ricosheaven --platforms=android,ios --description "Practice of flutter" planner_example
flutter create 명령 옵션
- –org : 앱 식별에 쓰이는 ID와 같은 옵션
- –platforms=android,ios : 안드로이드와 아이폰 개발용으로만 세팅할 경우 이렇게 해주면 됩니다.
- –description : 앱 설명
pubspec.yaml 설정
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.8
table_calendar: ^3.2.0
intl: ^0.17.0
drift: ^2.28.1
drift_flutter: ^0.2.5
path_provider: ^2.0.11
path: ^1.9.1
get_it: ^8.2.0
dio: ^5.9.0
provider: ^6.1.5
uuid: ^4.5.1
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^5.0.0
drift_dev: ^2.28.1
build_runner: ^2.6.1
위 코드에서 드리프트(Drift)는 클래스를 이용해서 SQLite 데이터베이스를 구현할 수 있는 플러그인입니다. 직접 SQL 쿼리를 작성하지 않아도 다트 언어로 데이터베이스 테이블과 쿼리를 구현하면 드리프트(Drift)가 자동으로 쿼리를 생성해줍니다. 코드 생성은 데이터베이스 관련 코드가 변경될 때마다 한 번씩만 실행해주면 되기 때문에 앱과 함께 패키징할 필요가 없습니다. 그렇기 때문에 실제 앱이 빌드될 때 함꼐 포함되지 않는 dev_dependencies에 드리프트(Drift) 코드 생성 관련 플러그인들을 추가 합니다.
자 다음에는 본격적으로 UI부터 만들어 가보도록 하겠습니다. 😁
참고
https://heavenly.tistory.com/entry/Flutter-CLI-flutter-create-필수-옵션-가이드