지난번에 작성했던 파일을 열고 note.dart 파일을 열어 주세요. 컬러 색상 몇 가지를 추가해 보도록 하겠습니다.
색상 정보를 관리하기 위해 Color 클래스를 사용합니다.
- Color 클래스를 생성할 때, 색상 정보를 16진수 형태(예: 0x211134)로 넘겨줍니다.
- 형식: ARGB
- A: Alpha – 투명도를 의미합니다. 255에 가까울수록 불투명해집니다.
- R: Red – 빨간색 농도입니다. 255에 가까울수록 빨간색이 진해집니다.
- G: Green – 초록색 농도입니다. 255에 가까울수록 초록색이 진해집니다.
- B: Blue – 파란색 농도입니다. 255에 가까울수록 파란색이 진해집니다.
컬러에 빨간줄이 표시가 된다면 컬러에 커서를 놓고 Alt+Enter를 눌른뒤 material.dart 파일을 임포트 해 주면 됩니다.
클래스에 색상을 저장할 공간을 추가해 주세요. final Color color;
생성자도 업데이트를 해 주어야 합니다. 색상은 노트를 작성할 때 필수로 넣어야 하는 것이 아니므로 노트 제목(title)을 만들때와 같이 중괄호 안에 넣어주고 기본 색상(colorDefault)을 지정해 주도록 합니다.
note_list_page.dart 파일로 이동해서 _buildCard 속성에 노트데이터의 색상을 넣어주면 됩니다.
마지막으로 샘플노트에 색상 변화를 확인해보도록 하겠습니다.
앱이 실행되면 아래와 같이 노트 색상이 앱에 잘 반영이 되는 것을 확인할 수 있습니다.
이것으로 노트 목록에 노트 색상을 반영하는 절차를 마쳤습니다.