[Flutter] 인스타그램 클론(2) - 화면설계

화면 설계!

 

 

먼저 새 플러터 프로젝트를 만들어 줍니다.

 

 

 

 

Main.dart 소스파일

Main.dart 소스파일에서 필요 없는 기본으로 설정된 부분을 제거 후 위의 부분만 남겨줍니다.

 

 

그리고 필요한 화면(Page)을 구현할  dart 파일을 추가합니다.

 

파일 이름은 아래에 표시한

 

Logn - login_page.dart

Root - root_page.dart

Tab - tab_page.dart

 

위의 세 개의 파일을 만들어줍니다.

 

 

 

 

그리고 먼저 Root Page를 수정합니다.

우선 안드로이드에서 사용하는 Material 디자인을 사용하기 위해 Import 해줍니다.

 

StateLess Widget을 처리해주기 위해서는 stl 까지만 입력하고 자동완성 팝업이 뜨면 Enter키를 눌러서 StateLess 위젯을 자동으로 생성할 수 있습니다. 이름만 정해서 입력해주면 됩니다.

 

Root Page의 소스를 위와 같이 수정해줍니다.

 

 

 

Tab Page

Tab Page에 대한 소스입니다. Tab Page의 경우 하단에 버튼을 클릭하면 전환되는 부분을 처리하기 위해 StateFull 위젯으로 만들어줍니다.

 

자동완성을 위의 StateLess와 같은 방식으로 stf를 입력하고 자동완성 팝업이 나타나면 Enter키를 눌러줍니다.

 

 

 

Main.dart 소스

C의 Main함수처럼 프로그램의 진입 소스라고 보시면 되겠습니다. 진입점에서 Root Page를 호출할 수 있도록 위와 같이 소스를 수정해줍니다.

root_ page 파일에서 작업한 페이지를 활용하기 위해서 해당 페이지를 가장 위쪽에 Import 하였습니다.

 

 

 

 

 

<수행 화면 1차>

위에서 작업한 내용을 다시 한번 살펴보시면, Container에 자식으로 'Tab Page'라는 Text를 넣어두었습니다.

 

 

 

 

Login Page

로그인 페이지는 일단 구분만 가능하도록 위와 같이 소스를 수정해줍니다.

 

 

 

하단 버튼을 클릭할 때 수행할 함수를 만들어줍니다.

 

 

 

 

onTapped 함수

함수가 호출되면 선택된 인자 변수를 받아온 값으로 바꾸어주는 기능을 합니다.

 

 

 

 

 

<수행 화면 2차>

아직 별다른 구분이 되지 않습니다.

 

 

 

 

Tab Page 추가 작업

리스트로 페이지를 표시할 텍스트를 만들어주고 page의 Body의 Center에 page라고 선언한 텍스트의 값을 받아옵니다. 선택된 인덱스를 통해서 'page 1' ~ 'page 3'이라는 텍스트를 화면의 중앙에 출력하게 됩니다.

 

 

<수행 화면 3차>

위와 같이 선택한 버튼의 페이지 번호를 화면 중앙에 출력하게 됩니다.

 

 

 

<수행 화면 GIF 파일>

수행을 해 보면 위와 같이 동작을 하게 됩니다.

 

동영상에서는 팝팝~ 하는 소리가 나서 재밌습니다. 동작은 위와 같습니다.

 

 

<수행 동영상>