지난포스트에서 플러터에서 앱에 데이터를 저장하는 패키지인 Shared Preferences의 사용법을 알아보았습니다. 데이터를 저장하는 화면을 만들어보도록 하겠습니다.
이번 포스트는 플러터의 다음 내용을 다루고 있습니다.
- 모델 클래스 만들기
- Shared Preferences 헬퍼 클래스 만들기
- FloatingActionButton 위젯
플러터에서 데이터를 저장하는 화면으로 독서한 시간을 기록하는 화면을 만들 계획입니다. 화면 이름은 "독서 트레이닝"이라고 하겠습니다.
독서 트레이닝 화면은 플로팅 버튼을 클릭하면 다이어로그가 팝업되고 책의 제목과 읽은 시간을 입력합니다. 입력 후 기록이 화면에 표시되고 앱에 저장됩니다. 저장된 기록은 앱을 완전히 종료하여도 삭제되지 않고 다시 실행 했을 때 표시되게 됩니다.
우선 독서 트레이닝 화면을 위한 모델 클래스를 만들어 보겠습니다.
모델 클래스 만들기
data폴더에 performance.dart라는 파일을 생성하였고 아래와 같이 책 읽은 실적을 나타내는 Performance 클래스를 작성하였습니다.
(1) 책을 읽은 실적 Performance별로 식별자가 있기를 원하므로 id를 만들었고 초기값 0으로 설정 하였습니다. 그리고 화면에서 표현하길 원하는 프로퍼티 date(날짜), description(책 설명 & 이름), duration(읽은 시간)를 선언하였습니다.
(2) Performance 생성자에서는 this 키워드를 사용하여 해당 이름을 가진 필드가 생성자가 받는 값으로 자동 설정이 되도록 하였습니다.
(3) named constructor인 fromJson에서는 map에서 Performance객체를 생성하고 있습니다.
(4) toJson 메소드 에서는 Performance 객체를 Map으로 변환하고 있습니다.
모델 클래스를 만들었으므로 데이터를 저장하는 패키지인 Shared Preferences 처리할 클래스를 추가해 보겠습니다.
Shared Preferences 헬퍼 클래스 만들기
sp_helper.dart 파일을 만들었습니다. 외부 패키지를 사용해야 하므로 파일 상단에서 shared_preferences를 import해야합니다. import문은 pub.dev 웹사이트의 패키지 설치 페이지에서 복사할 수 있습니다.
이 SPHelper 클래스의 목적은 프로젝트 코드와 shared_preferences 간의 인터페이스 역할을 하는 것입니다.
(1) 데이터를 읽거나 쓰려면 shared_preferences의 인스턴스가 필요합니다. SPHelper를 호출할 때마다 shared_preferences의 동일한 인스턴스를 써야 합니다. 따라서 prefs라는 SharedPreferences의 인스턴스를 static으로 선언하였습니다.
(2) 리턴이 Future 타입인 메소드를 선언하였고 async 표시를 하였습니다.
init메서드에서는 prefs 값을 설정하는 getInstance 명령어만 포함하고 있습니다. 기본적으로 init 메소드는 한 번 호출로 SharedPreferences 인스턴스 값을 유지하게 됩니다.
(3) SharedPreferences의 모든 write처리는 비동기식이므로 쓰기 작업을 하는 writePerformance도 비동기 처리를 해줘야 합니다.
메서드 내에서 SharedPreferences 인스턴스의 setString을 호출 하고 있습니다. 여기에는 키와 값이라는 두 개의 매개변수가 필요합니다. 키는 perfomance의 id를 사용할 수 있지만, 정수임으로 toString를 통해 String으로 바꿔주어야 합니다. 설정할 값에는 오직 String만 설정 가능하고 객체를 그대로 넣을 수 없으므로 객체를 문자열화해야 합니다. 먼저 toJson을 통해 performance객체를 map으로 바꾼 후 convert패키지의 encode를 통해 문자열화 해서 값을 설정하도록 하였습니다.
아직 몇 가지 기능이 부족하지만 차후에 작성하기로 하고 UI를 만들어 보도록 하겠습니다.
UI만들기, FloatingActionButton 위젯
screen폴더에 performance_screen.dart라는 새 파일을 만들었습니다. UI를 만들어 가면서 점진적으로 기능을 추가해 보도록 하겠습니다.
(1) PerformanceScreen 클래스를 stateful 위젯으로 만들어 주었습니다.
(2) State 클래스의 build 메소드에서는 Scaffold를 반환하고 있습니다.
(3) title이 "독서 트레이닝"인 AppBar위젯을 포함한 appBar를 설정하였습니다.
(4) body는 아직 빈 컨테이너 상태이고 차후에 변경하도록 하겠습니다.
(5) Scaffold에 floatingActionButton을 설정하였습니다.
FloatingActionButton
스캐폴드의 flotingActionButton 에서는 FloatingActionButton 위젯을 가지고 있습니다.
FloatingActionButton은 화면의 콘텐츠 위에 표시되는 버튼이며 화면의 기본 작업을 트리거하는 데 사용됩니다. 이 화면에서는 책을 읽은 기록을 이 버튼을 누름으로 추가하려고 합니다. FloatingActionButton에는 child가 있으며 여기에서는 Icon위젯의 add아이콘을 가지게 됩니다. onPressed 매개변수는 타 버튼 위젯과 같이 눌렸을 때 콜백으로 실행되는 함수를 설정할 수 있습니다. 지금은 비워두도록 하겠습니다.
현재까지 만든 UI를 앱에서 확인해 보도록 하겠습니다.
화면은 비어있지만 화면 위로 FloatingActionButton을 확인해 볼 수 있습니다.
다음 포스트에서는 사용자가 이 버튼을 누르면 SharedPreferences에 새 performance를 추가하고 UI도 계속해서 만들어 보도록 하겠습니다.
'프로그래밍 > Flutter' 카테고리의 다른 글
| [Flutter] 18. 데이터 저장 앱 만들기3, 데이터 읽기, ListTile 위젯 (0) | 2022.03.06 |
|---|---|
| [Flutter] 17. 플러터 데이터 저장 앱 만들기2 (AlertDialog 다이얼로그 위젯 입력 받기) (0) | 2022.03.03 |
| [Flutter] 15. 플러터 데이터 저장 패키지 Shared preferences 사용하기 (0) | 2022.03.01 |
| [Flutter] 14. 플러터 날씨 검색 화면 만들기 (0) | 2022.02.28 |
| [Flutter] 13. 플러터 http get, OpenWeather, 비동기 처리 (0) | 2022.02.26 |
댓글