아는 개발자 아는 개발자

Flutter

• flutter - BlocWidget

  개발 2022. 10. 6. 21:53

  설명만 읽어선 이해하기 어려울 것 같아서 실제 예제 코드가 있는 https://bloclibrary.dev/#/flutterlogintutorial 페이지를 보면서 따라가면 좋을 것 같다. BlocBuilder Bloc의 새로운 상태에 따라서 위젯을 만드는 클래스다. Bloc의 State가 변할 때마다 builder 함수가 여러번 불리게 되고 상태에 따라서 표현할 위젯을 바꿀 수 있다. 리턴 함수는 위젯 함수여야 한다. buildWhen 은 스테이트에 대해서 새롭게 위젯을 만들어야할지 말지를 리턴하는 함수다. 조건 문으로 특정 스테이트에 대해선 업데이트 하지 않도록 할 수 있다. BlocBuilder( buildWhen: (previousState, state) { // return true/false ..

  Read More
• flutter - Bloc, Cubit, Stream

  개발 2022. 10. 6. 21:40

  Bloc 표현층과 비즈니스로직을 분리하고 코드를 빠르고 재사용 가능하게 짤 수 있는 플러터 아키텍처다. Bloc을 이해하려면 먼저 Stream에 대한 개념을 짚고 넘어가야한다. Stream 비동기적인 데이터들의 연속을 말한다. 파이프 안에 흐르는 물로 비유할 수 있는데 흐르는 물이 비동기적 데이터고 그 물을 둘러싸는 파이프가 Stream이라고 볼 수 있다. Dart의 코드로 표현하면 다음과 같다. Stream countStream(int max) async* { for (int i = 0; i < max; i++) { yield i; } } Stream을 소비(Consume) 하는 코드도 만들 수 있다. 비동기로 값을 리턴하기 위해 async 를 붙이고 Future로 리턴한다. Future sumStre..

  Read More
• Flutter - Row, Column, Flexible, Expanded

  개발 2022. 3. 1. 12:45

  Flutter UI의 기본 위젯인 Row, Column, Flexible, Expanded에 대해서 알아보자. Row Flutter에서 Row 위젯은 안드로이드로 치면 LinearLayout 이면서 Orientation 이 Horizontal 인 뷰이다. Row 위젯에서 Children의 아이템으로 선언된 위젯은 동일한 Y축에서 순서대로 정렬된다. 아래 코드는 Row 의 children 속성에 두개의 Container 위젯과 하나의 Text 예제를 선언한 결과다. 그 아래 그림처럼 두 개의 Container와 하나의 Text 위젯이 그려지는 것을 확인 할 수 있다. child: Container( color: Colors.white, child: Row( children: [ Container(heigh..

  Read More
• 명령형 UI vs 선언형 UI

  개발/기술 2021. 11. 26. 20:00

  애플리케이션마다 UI Framework가 각각 다른데, 크게 명령형 UI(Imperative UI) 와 선언형 UI(Declarative UI) 로 나눌 수 있다. 명령형 UI Win32 부터 안드로이드, iOS 까지 기존 개발자들에게 가장 친숙한 형태로 메뉴얼하게 화면에 UI View를 추가하거나 삭제할 수 있는 형태의 프레임워크를 말한다. 위 예시 왼쪽 그림에서 View c1, c2를 갖고 있는 ViewB를 오른쪽 그림처럼 배경 화면이 빨간색이고 c3를 갖고 있는 화면으로 변경한다면 명령형 UI 에선 아래 같은 코드로 구현 하게 된다. // Imperative style b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) 선언형..

  Read More