노트 데이터를 담는 역할을 하는 노트 클래스 작성하기
lib 마우스 우클릭 -> new -> Directory -> data 폴더를 새로 만들어 주세요
data 디렉토리 우클릭 -> new -> dart.file 선택 -> note.dart 파일 생성
이 note.dart 파일안에 Note 클래스를 만들어 주도록 할께요. 이곳에 노트의 제목(String title;)과 본문(String body;)을 저장할 공간을 만들어 줍니다.
클래스 안에서 어떠한 자료를 저장할 공간을 만드려면 위에서와 같이 자료형의 종류와 이름을 함께 써주면 됩니다.
데이터를 관리하는 도중에 저지를 수 있는 실수를 최대한 방지하기 위해서 노트 클래스에 한번 담긴 데이터를 변경할 수 없도록 설정해 보도록 하겠습니다. 앞에 final을 붙여 주기만 하면 됩니다.
다음으로는 클래스를 위한 생성자를 만들어 주도록 하겠습니다. 생성자 (Constructor)란 클래스 형식의 데이터를 만들 때 사용하며, 여기에서는 노트 데이터를 만드는 시점에 노트 제목과 본문을 입력받을 때 사용합니다.
생성자는 클래스의 이름을 그대로 사용해서 정의해 줄 수 있습니다. 선택적으로 입력받을 인자이s title에는 중괄호( { } ) 안에 넣어주면 되며, 기본값을 지정할 수 있습니다. (예: Note(this.body, {this.title = ”}) 기본값은 ‘ ‘ 아무것도 입력이 않되면 비워놓도록 설정을 하였습니다.
이것을 노트 본문에 표시해 보도록 할께요. note_list_page.dart의 body부분으로 이동해 주세요.
노트 목록 화면에서 노트를 그리드 형태로 보여주는 코드를 작성합니다.
GridView: 노트를 그리드 형태로 표시하기 위해 사용합니다.
- padding: 그리드뷰 내 표시되는 위젯의 내부 여백을 지정합니다.
- gridDelegate: 그리드뷰에 화면을 배치할 방법을 지정합니다. 노트를 한 줄에 두개씩 표시하기 위해 SliverGridDelegateWithFixedCrossAxisCount를 사용합니다.
- SliverGridDelegateWithFixedCrossAxisCount 내 crossAxisCount 속성으로 가로로 표시할 항목 수를, childAspectRatio로 그리드에 배치할 위젯의 가로/세로 비율을 지정합니다.
다음으로 노트를 화면에 그려주는 코드를 작성해 보도록 할께요.
_NoteListPageState 내부에 _buildCard() 함수를 생성해 주세요. 이 함수는 위젯 즉 노트 하나를 구성하는 화면을 반환합니다. 인자로는 Note 데이터를 넣을께요.
이 앱에서는 노트를 카드위젯에 표시할 꺼기 때문에 return Card() 위젯을 최상단에 감싸주세요.
카드 내부를 구성하기 위해 child 속성을 사용합니다. 수직방향으로 배치하기 위해 Column 위젯을 추가합니다. column 위젯 속성 추가에서 위젯이 필요한 공간만을 차지하도록 MainAxisSize.min 으로, CrossAxisAlignment.start 로 가로방향 정렬 속성으로 지정합니다.
다음으로는 Children 속성에 노트 제목 영역을 먼저 배치하고 본문 영역을 배치합니다. 만약 제목이 비어있다면 ‘제목없음’으로 출력되도록 했고, 제목 스타일의 폰트는 16, 조금 굵에 스타일을 설정했습니다.
제목과 본문이 조금 떨어지도록 SizeBox 위젯을 넣어줬습니다.
본문영역을 마지막으로 넣어주는데요. 본문 영역이 길어지면 모든 내용을 노트앱에 표시할 수 없기 때문에 fade 속성을 지정해 주었습니다.
마지막으로 본문 영역이 카드 공간에 남은 영역을 모두 차지할 수 있도록 하기 위해 Expanded위젯으로 감사주겠습니다. Text에 커서를 놓고 Alt + Enter 키를 동시에 눌러 주세요.
마지막으로 모든 면에 여백을 12만큼 추가해 주도록 할께요. Column 부분에 커서를 놓고 Alt+Enter를 누른후 padding을 검색해서 엔터를 눌러주세요. 아래 패딩부분을 12로 수정합니다.
List<Widget> _buildCards()는 노트에 정보를 담고 있는 카드 위젯을 여러개 만들어 내는 함수를 만들어 줍니다. 노트 변수에 노트 리스트 정보를 넣어줍니다. 노트 정보를 위젯으로 변환 했다가 toList를 이용해 다시 리스트로 반환합니다.
마지막으로 NoteListPageState 속성으로 이동해서 _buildCards() 를 넣어주도록 하겠습니다. 이렇게 하면 그리드뷰 내부에 노트 내용을 카드위젯 형태로 표현할 수 있습니다.
이제 실행을 시켜 보도록 할께요. 아직 아무것도 나오지 않고 있습니다. 아직은 화면에 노트데이터를 넣지 않았기 때문에 이렇게 나오는데요.
이 부분을 아래의 코드로 대체해서 넣어주도록 하겠습니다.
코드를 넣어주면 아래와 같이 나타나는 걸 확인할 수 있습니다.
다음 시간에는 노트에 색상을 추가하고, 이를 목록 화면에 반영하는 방법을 알아봅니다.