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

오늘은 사진을 보여주는 Search Page를 디자인해 보도록 하겠습니다.

 

내용은 아래의 지난 포스팅보다는 간단하며, 지난 작업에서 만든 Tab Page에 간단히 이번 포스팅에서 작업할 Search Page 내용을 불러올 수 있도록 수정하며, 해당 페이지의 UI를 디자인하는 작업을 합니다.

 

지난 포스팅은 아래에서 확인할 수 있습니다.

2020/07/25 - [프로젝트/[Flutter] 인스타그램 클론] - [Flutter] 인스타그램 클론(3) - Home Page UI 작성

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

 

 

 

1. search page dart 파일 추가

새로 파일을 만들어 줍니다. 이름은 search_page로 정했습니다.

 

 

 

 

2. Search page 기본 뼈대(소스) 작성

소스파일을 만든 후 Material.dart를 Import 합니다. 

그리고 STF(Stateful) 위젯을 추가하여 그 이름을 SearchPage로 지정합니다. 추후 이 이름을 통해서 Tab Page에서 이 위젯을 호출합니다.

 

 

3. Tab Page 수정 - Search Page사용

그리고 tab_page.dart소스 Page의 List인 _pages에서 2번째 리스트 값인 Text('page2')를 SearchPage()로 변경해줍니다.

 

 

 

4. Search Page 확인 1

 

새 페이지가 잘 불러와진 것을 확인할 수 있었습니다.

 

 

 

 

5. 소스 작성 - 함수 추가 작성

이제 Search Page의 핵심인 GridView를 활용하여, 사진의 배열이 이루어질 수 있도록 한번 작업을 해 보겠습니다.

 

Body는 함수를 통해 따로 위젯으로 빼서 소스 작업을 하였습니다.

 

 

 

 

 

6. Search Page 확인 2 - 이미지, 여백 불러온 것 확인

이미지 개수를 지정하였고, 네트워크 이미지로 지정하여 불러온 해당 이미지가 5개 잘 불러와진 것을 확인할 수 있었습니다.

 

 

 

이 다음번에는 사진을 포함하여 간단한 텍스트를 포함하는 포스트를 추가하는 페이지인, Create Page를 디자인 해 보겠습니다.

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

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