Flutter
-
flutter - provider 패턴개발 2023. 1. 4. 19:49
flutter의 상태 관리 방법으로 BLOC은 작업을 추가할 때마다 이벤트 클래스를 매번 생성해야하는 번거로움이 있고 코드가 불필요하게 길어져서 가독성이 떨어진다. 뿐만 아니라 MVVM 패턴에 익숙한 사람에게는 BLOC을 활용하는 작업이 직관적으로 받아들여지지 않는다. 다행히도 나만 불편함을 느낀게 아닌지 BLOC을 대체하는 많은 대체할 수 있는 라이브러리가 다수 존재한다. 나는 Provider 패턴이 가장 쓰기 쉬웠다. 라이브러리 추가 dependencies: flutter: sdk: flutter provider: ^6.0.5 먼저 provider 라이브러리를 추가한다. 작성기준 최신 버전은 6.0.5 다. ChangeNotifier 인스턴스 추가 class ExampleModel with Chang..
-
flutter - BlocWidget개발 2022. 10. 6. 21:53
설명만 읽어선 이해하기 어려울 것 같아서 실제 예제 코드가 있는 https://bloclibrary.dev/#/flutterlogintutorial 페이지를 보면서 따라가면 좋을 것 같다. BlocBuilder Bloc의 새로운 상태에 따라서 위젯을 만드는 클래스다. Bloc의 State가 변할 때마다 builder 함수가 여러번 불리게 되고 상태에 따라서 표현할 위젯을 바꿀 수 있다. 리턴 함수는 위젯 함수여야 한다. buildWhen 은 스테이트에 대해서 새롭게 위젯을 만들어야할지 말지를 리턴하는 함수다. 조건 문으로 특정 스테이트에 대해선 업데이트 하지 않도록 할 수 있다. BlocBuilder( buildWhen: (previousState, state) { // return true/false ..
-
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..
-
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..
-
명령형 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) 선언형..