[Flutter] 인스타그램 클론(5) - Create Page UI 작성

오늘은 지난 페이지(Search Pare) 디자인에 이어 새로 포스팅을 추가할 Create Page의 디자인을 해 보겠습니다.

 

지난 포스팅까지 완성을 하셔야 하니  혹시 아니라면 이전 포스팅부터 확인을 해 보시기 바랍니다.

2020/08/08 - [프로젝트/[Flutter] 인스타그램 클론] - [Flutter] 인스타그램 클론(4) - Search Page UI 작성

[Flutter] 인스타그램 클론(4) - Search Page UI 작성

 

1. CreatePage 소스파일 생성 및 소스 작업

 

 다트 파일을 새로 추가하여 Create Page의 소스를 작성합니다.
파일 이름은 create_page.dart로 지정합니다.

 

 

2. Search Page에서 Create Page를 불러올 수 있도록 수정

 

 그리고 새로 포스팅을 하는 버튼으로 이전 포스팅에서 작성했던 플로팅 버튼의 onPressed에 Create Page를 불러올 수 있도록 소스를 수정해 줍니다.

 

 

 

3. 수정사항 확인

 

수정된 내용을 확인하며, 수정된 부분까지 한번 화면 동작을 확인해 보았습니다.

 

 

 

 

 

4. Body소스 작정

 

 Column으로 레이아웃을 배치하여 사용합니다.

 이미지 선택 여부를 표시할 Text와 실제 사용자의 포스트 내용을 입력받을 TextField를 추가해줍니다.

 

 

5. 선언 및 메모리 해제를 위한 Dispose함수 오버라이드

 

 그리고 TextField의 경우에는 자동으로 메모리 해제가 되지 않아서 수동으로 해제를 해 줍니다.

 

 

 

 

6. 소스 수정

 

 그리고 사진 추가하는 버튼과 전송 버튼 활성화를 위한 AppBar에 있는 Send버튼에 기능은 없지만 함수 형태를 만들어 활성화가 되도록 하였습니다.
그리고 사용자가 포스트 내용을 입력할 텍스트 필드의 작성에 도움을 주기 위해 Placeholder를 위한 decoration을 추가해 주었습니다.

 

 

 

7. 현 작업까지 진행 시 수정사항 확인

 

 여기까지 작업된 내용을 실행해 보았습니다.

 

이상으로 마칩니다.

 

 

 

다음 포스팅은 게시물을 생성하는 페이지에서 갤러리의 이미지를 불러와 작성하는 기능을 구현하기 위한 내용입니다.

<갤러리 사진 불러오기>로 아래에서 확인해 보실 수 있습니다.

 

2020/08/10 - [프로젝트/[Flutter] 인스타그램 클론] - [Flutter] 인스타그램 클론(6) - 갤러리 사진 불러오기

[Flutter] 인스타그램 클론(6) - 갤러리 사진 불러오기