[Flutter / 플러터] BLoc Pattern (블락 패턴)의 장점

Flutter 를 개발하면서 사용할 수 있는 상태관리 패키지가 여럿 있지만 엔터프라이즈 레벨에서 사용하기 제일 좋은 패키지는 Bloc 이라는 의견이 주를 이룬다. 본인도 사용해본 결과, 1. 같이 일하는 사람들과 코드 컨벤션이나 구조를 맞추기가 제일 용이하다는게 가장 큰 장점 2. 문서화가 굉장히 잘 되어있다. 개념에 대한 설명과 왜 이런 패턴을 따르는지, 어떤 원리로 동작하는지 설명하고, 예시 코드도 문서에 포함되어 있다. (https://bloclibrary.dev/#/) 3. 성숙한 패키지가 존재 (+ DI 패키지를 또 따로 사용하지 않아도 동일한 패키지에서 제공해준다) 세부적인 사용 예시는 사용하는 사람에 따라서 여러가지가 있을 수 있지만, 문서에 나와있는 예시만으로도 충분히 좋은 practice..

• format_list_bulleted APP/Flutter
• · 2023. 7. 12.
• textsms

[Flutter / 플러터] 구글지도 사용하기 Google Map

google_maps_flutter | Flutter Package (pub.dev) google_maps_flutter | Flutter Package A Flutter plugin for integrating Google Maps in iOS and Android applications. pub.dev 위 링크의 ReadMe를 잘 따라하면 된다! 하지만 처음 읽어보는 사람들에게는 꽤 불친절할 수 있으니 찬찬히 실습을 진행해보겠습니다 먼저 dependency를 걸어줘야 합니다. pubspec.yaml에 라이브러리를 추가합니다. dependencies: flutter: sdk: flutter google_maps_flutter: ^2.2.8 dependencies 밑에 넣어주면 됩니다. (2023/06/..

• format_list_bulleted APP/Flutter
• · 2023. 6. 4.
• textsms

[Flutter / 플러터] 내비게이션 바, 탭 바 사용하기 (Tab Bar)

탭 바, 일반적으로 내비게이션 바라고 부르는 뷰를 만들어보자 많이 쓰이는 것들은 BottomNavigationBar, TabBar, PageView 등등 내비게이션 바, 페이지를 만드는데 사용할 수 있는 위젯은 다양하다. 이 중 TabBar를 사용해보자 보통 내비게이션 바에는 4개의 탭이 있고, 상단 또는 하단에 위치하게 된다. 4개의 탭을 생성해보자 TabBar( indicatorColor: Colors.yellow, // 선택 영역 색깔 indicatorSize: TabBarIndicatorSize.tab, // 선택 영역 색 범위 탭 영역 전체 (길다란 선) controller: _tabController, // 탭 컨트롤러 tabs: [ IgnorePointer( child: IconButton(..

• format_list_bulleted APP/Flutter
• · 2023. 6. 4.
• textsms

Flutter) Widget 생성 Class vs Function

Flutter에서 widget을 생성할 때, class를 이용하여 생성할 수도 있고, function으로 생성할 수도 있다. 모든 ui 컴포넌트는 widget이고, widget은 class를 이용하여 stateful, stateless widget으로 생성하는 것으로 처음 배울 수 있었기 때문에 class를 이용해서 생성하는 것이 당연하다고 생각했었다. 하지만 function으로 위젯을 생성하는 코드들도 볼 수 있었고, 왜 그렇게 이용하는지 물어보니 코드가 짧아진다는 장점이 있었다. // class class CustomWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } } ..

• format_list_bulleted APP/Flutter
• · 2022. 5. 8.
• textsms

flutter) artemis 패키지 GraphQL LocalTime to Dart DateTime 변환 오류

graphql 관련하여 스키마와 *.graphql 파일들을 기반으로 graphql을 편하게 이용할 수 있게 .graphql.dart 파일 코드를 작성해주는 패키지이다. Apollo 와 비슷한 작업을 도와준다고 한다. graphql 은 dart에서와 다르게 dateTime이 아닌 localTime, localDate 등등 기존의 시간 관련 표시를 해주는 타입을 가지고 있다. 그래서 이를 dart에서 쓸 수 있는 타입으로 변경을 해줘야하는데 이것도 artemis에서 도와준다. 예시 또한 공식 문서와 깃허브에 올라와 있으니 확인해서 이용하면 된다. 그런데 사용해보니 기존 예시랑 다르게 파일이 작성되어서 오류가 나는 현상이 발생했다. 빌드시 참고하는 build.yaml 파일에서 targets: $default:..

• format_list_bulleted APP/Flutter
• · 2022. 4. 24.
• textsms

Flutter CarouselSlider 한 페이지 여러 개

일반적으로 CarouselSlider 위젯을 사용하면 item에 Widget List를 넣고 그만큼 페이지 갯수가 생성된다. 하지만 CarouselSlider.builder 를 이용하면 itemCount를 원하는대로 구성하여 한 페이지에 여러 위젯을 집어넣을 수 있다. CarouselSlider.builder( itemCount: (controller.youtubeUrls.length / 2).round(), // 이 itemBuilder 실행은 페이지를 넘길때마다 실행된다. // 그래서 autoPlay 기능을 넣는다면 성능을 위해서는 builder를 사용하지 않는 편이 좋을 것 같다. itemBuilder: (BuildContext context, int index, int realIndex) { //..

• format_list_bulleted APP/Flutter
• · 2022. 4. 15.
• textsms

Flutter 네이버 로그인 & 카카오 로그인iOS 안될 때

플러터에서 네이버 로그인 sdk 를 이용할 때 import NaverThirdPartyLogin override func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return NaverThirdPartyLoginConnection.getSharedInstance().application(app, open: url, options: options) } 이 코드를 넣어줘야 iOS에서 네이버 로그인이 실행된다. (안드로이드는 문제 없음) 하지만 이 코드는 소셜 로그인 처리를 모두 네이버 로그인만 처리하도록 하는 코드라서 카카오 로그인 sdk는 이용하..

• format_list_bulleted APP/Flutter
• · 2022. 4. 12.
• textsms

Flutter webview 플러터에서 웹뷰 사용하기 (webview_flutter)

flutter 에서 사용되는 webview 패키지는 유명한게 두가지가 있다 webview_flutter 와 flutter_inappwebview 가 있는데, flutter_inappwebview 가 유용한 기능들을 제공하고 있다고 들었는데 현재 기준으로 최근 업데이트가 무려 8개월 전이고(Null safety는 지원한다.) webview_flutter 가 flutter.dev 에서 제공하기도 하고 flutter_inappwebview 보다 많이 사용되기도 하고 자주 최신화가 되어서 webview_flutter 를 사용하기로 했다. (그리고 예제를 많이 찾을 수 있음) 이제 사용법을 알아보자 pub.dev 에서 webview_flutter 패키지를 설치한다 flutter pub add webview_flu..

• format_list_bulleted APP/Flutter
• · 2021. 12. 9.
• textsms