flutter
-
[Flutter&Dart] <Error> MaterialTapTargetSize: 모바일과 데스크톱의 spacing 차이Dev_Log/Flutter&Dart 2023. 5. 6. 02:34
오류 Chip이나 Button등이 들어간 Column의 경우, 모바일과 데스크탑의 줄간격이 서로 상이한 문제가 발생한다. 해결방법 해결방법은 생각보다 간단하다. ThemeData의 materialTapTargetSize 값을 아래 두개 중 하나로 지정해두면 된다. materialTapTargetSize: MaterialTapTargetSize.shrinkWrap -> 간격 좁게 materialTapTargetSize: MaterialTapTargetSize.padded -> 간격 넓게 *모바일에서의 tap 사용성 편의를 위해 간격을 조금 넓게 기본 설정된 것으로 추측된다. return MaterialApp( color: Colors.white, theme: ThemeData( materialTapTarg..
-
[개발일지] Flutter Bloc 상태관리 #5 비동기 처리 방식: bloc_concurrency PackageStudy/Development 2023. 4. 12. 12:16
bloc_concurrency Ember_concurrency에서 영감을 얻어 만듦 비동기 프로그램을 간결하면서도 강력하게 만들어주는 라이브러리 Concurrent 방식 bloc의 기본 처리 방식, 연속 호출 시 이벤트간에 시간이 겹친다. 각각의 이벤트가 불필요하게 모두 실행됨. Sequential 방식 1번이 완료된 이후에 2번이 실행된다. 순차적으로 실행되어 각각의 이벤트를 확인 가능하지만, 더 많은 이벤트 호출 시 의도와는 다르게 이벤트들이 하나하나 모두 끝날때까지 순차적으로 계속 실행되는 경우가 발생할 수 있다. Droppable 방식 이벤트가 발생하여 완료되는 순간까지 다른 이벤트 호출이 무시된다. Restartable 방식 가장 최종의 클릭만 수행. 악의적인 이벤트 호출을 무시하고, 서비스 부..
-
[개발일지] Flutter Bloc 상태관리 #4 Bloc vs CubitStudy/Development 2023. 4. 10. 11:37
Bloc 공식문서 확신이 안 서는 경우, Cubit으로 시작하여, 필요에 따라 Bloc으로 리팩터링 하거나 확장 가능. Bloc에만 있는 기능 유지보수 측면에서 유리 1. 상태변화 모니터링을 이벤트로 확인 가능 onChange(): 상태가 어떤 데이터로 바뀌었는지 확인 (Cubit & Bloc) onTransition(): 어떤 event를 통해 어떻게 상태 변경 되었는지 확인 가능 (Bloc에만 존재) // onChange 함수: Cubit, Bloc @override void onChange(Change change) { super.onChange(change); print(change); } // onTransition 함수: Bloc only @override void onTransition(Tr..
-
[개발일지] Flutter Bloc 상태관리 #3 GetX vs Cubit vs BlocStudy/Development 2023. 4. 8. 17:00
GetX vs Cubit vs Bloc GetX 여러개 상태를 한번에 관리 GetX를 사용하더라도 쪼개서 사용하면 유지 보수, 코드 재사용이 용이 Cubit 구조 cubit과 bloc은 하나만 존재. 상태와 타입을 하나만 emit 함수를 이용하여 상태 변경, cubit이나 bloc에서만 사용 가능 Bloc 구조 GetX나 Cubit에 비해 번거로움 Bloc, Event, State가 구분되어있다. 디테일하게 이벤트 트래킹이 가능하다. GetX 1. View Page // GetX Page는 GetView를 extends 해준다. class GetxHome extends GetView { const GetxHome({super.key}); @override Widget build(BuildContext c..
-
[개발일지] Flutter Bloc 상태관리 #2 Bloc WidgetsStudy/Development 2023. 4. 6. 16:38
Flutter Bloc Widgets BlocProvider 지연생성 옵션(lazy): false(사용 시점에서 동시에 사용) 하위 계층 위젯들에서 접근 가능 Bloc 생성 후 메모리 반환의 경우 자동으로 해준다 return BlocProvider( create: (context) => SampleBloc(), lazy: true, child: SamplePage(), ); MultiBlocProvider BlocProvider 다중 등록 return MultiBlocProvider( providers: [ BlocProvider(create: ((context) => SampleBloc())), BlocProvider(create: ((context) => SampleSecondsBloc())), ],..
-
[개발일지] Flutter Bloc 상태관리 #1 상태관리와 BlocStudy/Development 2023. 4. 4. 16:17
플러터 상태 관리 라이브러리 GetX: 많은 사랑, 많은 문제 → 유지 보수 등 유동적 개발 어려움, 버그 Provider: 꾸준히 사랑받음 riverpod: 요즘 핫함 bloc: 진입장벽, 복잡하지만 대규모 프로젝트에 적합 블록을 사용하는 이유 5가지 뷰 영역과 비즈니스 영역을 쉽게 구분할 수 있다. 테스트하기 쉽고, 재사용을 가능하게 해준다 *TDD: Make the test pass → Refactor → Write a failing test 이벤트 트래킹을 통합적으로 관리할 수 있다 *GetX는 없음 많은 개발자들이 하나의 코드 베이스로 일을 처리할 수 있다. Github에서 가장 높은 Star 수 (Bloc > GetX > Provider > Riverpod) 동기 vs Future vs Str..
-
[Flutter&Dart] url_launcher Package 사용하기 - Easy Flutter Package #4Dev_Log/Flutter&Dart 2023. 3. 24. 18:14
url_launcher url을 클릭 시 웹 브라우저에서 띄워주는 패키지. 간단하게 사용할 수 있다. url_launcher | Flutter Package Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes. pub.dev 설치하기 flutter pub add url_launcher 사용법 1. 한번에 쓰는 법 // URL 부분에 URL을 넣으면 된다. launchUrl(Uri.parse(URL)); 2. 나눠서 쓰는 법 Uri를 따로 한번 선언해주고 실행은 따로 한다. // Uri 선언해주기 final Uri _uri = Uri.parse(URL) // 실행시키기 launchUrl(_uri); onTap, on..
-
[Flutter&Dart] pull_to_refresh Package 사용하기 - Easy Flutter Package #3Dev_Log/Flutter&Dart 2023. 3. 24. 07:17
pull_to_refresh 아래로 당겨서(pull down) 새로고침(refresh), 위로 올려서(pull up) 추가 로드(loading)을 쉽게 구현할 수 있는 Package이다. GridView, ListView 등에 사용할 수 있다. pull_to_refresh | Flutter Package a widget provided to the flutter scroll component drop-down refresh and pull up load. pub.dev 설치하기 flutter pub add pull_to_refresh 사용법 1. SmartRefresher 위젯으로 감싸준다. 2. Controller를 Builder 밖에 선언해주고, 값을 입력해준다. *안에 선언할 경우, refresh..