programming코딩

리얼 Flutter #7 App 만들기 – UI 구현하기 with BLOC

앞서 Chatper #5 BLOC 그리고 Chapter #6 Data Repository까지 만든것을 기반으로 드디어 UI 구현하기 Chapter를 시작합니다.

설명과 함께 구현하는 코드는 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 구현하기 예시

Repository와 BLOC 생성하기

자 Chapter #4, Chapter #5에서 만든 Repository와 BLOC를 App에 생성해야 합니다.

  1. RepositoryProvider 의 create로 IdeaRepository를 생성해주었습니다. 이제 하위 Widget은 모두 IdeaRepository를 사용할 수 있습니다.
  2. BlocProvider의 create로 IdeaBloc를 생성해주었습니다. 이제 하위 Widget은 모두 IdeaBloc를 사용할 수 있습니다.

BlocBuilder

Chapter #3 Routes 에서 적용하지 않았떤 BlocBuilder를 적용합니다.

BlocBuilder는 Bloc의 state에 따라서 UI를 구성하도록 해줍니다.

아래 코드를 보면 body에 BlocBuilder를 적용하고 builder에서 state에 따라서 Widget을 return 해줍니다.

if (state is IdeaStateNotInitalized)

Circular Progress Animation을 화면의 한 가운데 보여줍니다.

하지만 지금 앱에서는 워낙 빨라서 안 보입니다. ㅎㅎ

if (state is IdeaStateFetched)

Idea list를 Card 형식으로 보여줍니다.

Repository와 ListView.builder

RepositoryProvider를 통해 앞서 MyApp에서 생성한 IdeaRepository를 불러옵니다.

그리고 Chapter4 Data Repository에서 만들었던 getList() method를 사용하여 현재 Idea data를 list 형태로 가져옵니다.

List 형태로 되어 있는 data를 ListView로 표현할 때는 ListView.builder를 사용하는게 적합합니다.

Argument로는 itemCount 는 idea의 갯수를 List의 length로 주고 itemBuilder는 List에서 item을 index에 따라서 return하도록 합니다.

예제 앱에서는 Item을 IdeaCard라는 새로 만든 Widget으로 표현하였습니다.

위 예제는 idea를 Tap하면 Idea editor 화면으로 이동하기 위해서 GestureDetector를 사용했습니다.

Idea Card

아래는 List에서 하나의 Item으로 구성되어 표현되는 IdeaCard의 실제 구현된 이미지와 Source Code입니다.

UI Widget들에 대해서 한 줄 한 줄 설명하지는 않겠습니다.

여기서 핵심은 Flutter의 Widget들은 Tree로 구성하여 표현한다는 것이고 필요한 Layout을 Widget으로 만들어가면서 구현하면 코드를 훨씬 간결하게 표현할 수 있습니다.

반복되는 Idea Card를 아래와 같이 Widget을 만들면 Idea item data만 변경해주면 됩니다.

Idea Card에서도 요약 text를 한 줄로 표현하는 Widget을 IdeaCardShort이라는 이름으로 만들어 재사용하는 것을 보실 수 있습니다.

Widget Tree 보기

Flutter의 UI는 layout, Widget, 속성 모두 tree로 만들어집니다.

Android Studio에서 Flutter Inspector로 Widget Tree를 보는 방법입니다.

아래 그림으로 표현하였습니다.

  1. Debug Mode로 실행을 합니다.
  2. Flutter Inspector를 Open합니다.

Widget의 Tree 구성을 아래와 같이 확인이 가능합니다.

마치며

문법은 IDE (Android Studio)가 알려주고

Widget의 구성은 위와 Flutter Inspector와 같은 Tool을 이용하면 되므로

오랜 시간 사전적 공부를 하지 않아도 된다고 생각합니다.

바로 App 만들기를 해보는게 어떨까 싶습니다.

UI를 구성하는 것보다 SW의 구조를 어떻게 가져가야 하는지 최대한 설명하고자 합니다.

다음 Chapter에서는 Idea Card 입력하는 화면으로 이동하여 마무리하겠습니다.

Leave a Reply