programming코딩

리얼 Flutter #8 App 만들기 – UI 1차 완성 with Route 인자

앞서 Chatper #7 UI 구현 with BLOC 에서 UI에서 어떻게 BLOC와 Repository를 활용하는지 확인하였습니다. 이번 Chapter에서는 Idea Edit 화면으로 이동하는데 있어 Edit할 Idea를 Editor에 Route 인자 를 포함하여 이동하는 것과 Text 입력을 포함하여 App을 1차 완성합니다.

설명과 함께 구현하는 코드는 github repository에 있고 본 글은  commit 5d1933f 기준입니다.

완성 UI

다음은 완성한 UI입니다.

  1. + 버튼을 누르면 Idea Editor 화면으로 이동합니다.
  2. Title, As a, I want, So that 4가지를 입력하고 화면 우측 상단에 Save 버튼을 누릅니다.
  3. List에 새로 추가한 Idear가 보입니다.
  4. Idea Card의 more 버튼을 누르면 Delete popup menu가 보입니다
  5. Delete Popup을 누르면 해당 Idea는 삭제됩니다.
Flutter UI 구현하기 예시

Route 인자 전달하기

Route로 Idea Editor로 이동하는 부분은 2군데입니다.

  • Idea Card를 선택하여 Idea를 추가로 수정하는 경우.
  • Floating + button을 눌러 Idea를 새로 추가하는 경우.

Navigator를 통해 Route를 이용할 때 인자를 추가할때 arguments에 추가해주면 됩니다.

Idea Card로부터 기존 Idea를 수정할 경우 ideas[index] 를 전달하고,

새로운 Idea를 생성할 경우에는 IdeaRepository.getNew()를 사용하는 것을 알 수 있습니다.

Route 인자 보내는 코드 예제

Route 인자 받기

Route는 Function Call 하는게 아니고 Navigator를 이용해 설정하는 방식이기 때문에 다음과 같은 방법으로 인자를 가져와야 합니다.

Text 입력 받기

Text 입력을 받는 UI는 TextField를 사용합니다.

하지만 더 중요한 것은 여기서 입력한 Text를 어떻게 꺼내오는지겠죠?

아래 표시한대로 TextEditingController를 이용합니다.

TextEditingController를 생성해주고 addListener를 통해서 입력이 있을때마다 text를 가져와서 buffer에 설정해주도록 하였습니다.

Save하기

입력한 내용을 저장하기 위해서 save 버튼을 AppBar에 추가하였고 Tap할 경우 저장하도록 하였습니다.

여기서 중요한 부분은 add(IdeaEventSaving(idea) 입니다.

저희는 BLOC를 사용하고 있습니다.

그러므로 Repository의 save method를 바로 호출하지 말고 event를 Bloc에 전달해야 합니다.

마치며

드디어 러프하지만 기본적으로 Idea를 CURD할 수 있는 App을 만들었습니다.

설명에 Code를 붙이지 않고 일일히 다 설명하지 않은 것은  github repository에 있는  commit 5d1933f 에서 참조하시기 바랍니다.

이제 다음 단계는 앱 등록입니다.

아직 미흡하지만 앱 등록을 먼저 하는 이유는 시간때문입니다.

앱등록에 시간이 오래 걸리기 때문입니다.

만약에 애드몹까지 하여 광고수익을 목표로 하는 분들은 처음이라면 긴긴 시간을 기다려야 합니다.

그리고 애자일 개발 방식으로는 일단 등록하고 유저의 피드백을 받아가면서 수정하는게 작은 팀 또는 1인 개발자 또는 스타트업에게 적합한 방법이라고 생각합니다.

Leave a Reply