[Flutter] 첫 앱 만들기 ( Part. 1 )

글을 다 작성했을 때 쯤..... 컴퓨터가 먹통이 되어 처음부터 다시 작성하려니 참.... 빡...이....ㄷㄷㄷㄷ

 

그래도 다시 힘 내서 !!!!

 

 

오늘은 플러터 첫 앱 만들기를 진행 해 보겠습니다.

 

 

내용은 아래에 Flutter 앱 만들기 Part 1을 플러터에 대해 조금 찾아보기만 한 개발자(?)의 시행착오와 함께 기록 해 둡니다.

 

 

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0

Write Your First Flutter App, part 1

 

 

<사진 1> english_words 패키지 추가하기 (실수)

아무것도 모른 채 작업을 하다보니 소스를 붙여넣는 위치도, 중복되기도 하였습니다.

 

 

<사진 2> english_words 패키지 추가하기 (정상)

맞는 위치에 띄어쓰기까지 실수 없이 입력하면, 그 다음 위의 2번에 표시된 Package get을 클릭합니다.

 

 

 

<사진 3> 패키지 정상적으로 가져와진 것 확인 (pubspec.lock 파일 확인) 

위의 파일에 내용이 추가되었다면, 정상적으로 패키지를 가져온 것입니다.

 

<사진 4> Hellow world소스 일부 수정 

포스팅 하면서 소스를 뒤늦게 차근히 보니, Hellow world가 아닌 추가한 패키지에 wordPair를 받아와서 표시하는 것을 확인할 수 있습니다.

 

 

 

<사진 5> 테스트 1 

 

위의 소스까지 작업되고 테스트를 해 보면 아래와 같이 됩니다.

 

 

 

 

 

<사진 6> 테스트 2 - Flutter Hot Reload를 통해서 단어가 바뀌는 것 확인

 

플러터의 핫 리로드 기능을 활용하여 다시 로드될 때 마다 임의로 단어쌍을 표시해 주는 것을 확인하였습니다.

 

 

 

<사진 7> 소스 추가 

 

 

<사진 8> 소스 추가2

 

 

<사진 9> 소스 수정 (삭제<주석처리> 및 추가)

<사진 10> 소스 수정 - build 함수 수정

 

<사진 11> Part 1. 완료 후 테스트 1차

 리스트 뷰의 형태로 아까 보던것과 유사한 영어단어 쌍을 표시하는 프로그램이 완성되었습니다.

 

 

 

 

<사진 11> Part 1. 완료 후 테스트 1차

 

리스트 뷰에서 스크롤까지 한번 해 봤습니다. 노트8로 전체 캡쳐중에는 스크롤이 되지 않아 미리 스크롤 하자마자 캡쳐한 화면입니다.

 

 

 

이상으로 첫 플러터 App 만들어보기 Part 1을 마칩니다.

 

 

 

 

 

사실 내용을 훨씬 자세하게 적었는데, 먹통되고 자동저장이 안되 멘탈이 바바바...바사사사삭.....

 

저녁때 또는 다음에 Part2작업하면서 추가하도록 하겠습니다.