[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

dart ) split 여러 문자

정규표현식으로 여러 문자를 기준으로 split하는 방법이 있다. import 'dart:core'; void main() { String str = 'ef;n fijweoj fwe:fjwoej fwjfeo:d edflk'; // 정규 표현식으로 ' ', ':', 'f'인 문자를 기준으로 split List a = str.split(RegExp(r'[ :f]')); print(a); } // result == [e, ;n, , ijweoj, , we, , jwoej, , wj, eo, d, ed, lk] 정규표현식의 []를 이용하여 원하는 문자들을 골라 split할 수 있다. 정규표현식을 여러가지로 응용해서 원하는대로 split할 수 있다.

• format_list_bulleted etc
• · 2022. 5. 3.
• 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 개발자 모임' 채널에서 설문을 진행하였으며, 개인 정보는 수집하지 않았기 때문에 허수가 존재할 수 있다는 점 말씀드립니다. https://forms.gle/S3zKW5Tn5xVEpqLa8 Flutter 개발자 연봉 관련 설문 플러터 개발자 분들의 연봉에 대한 정보가 잘 없어서 이런 설문도 있으면 좋겠다는 의견을 많이 들어서 제작해보았습니다. 개인정보는 수집하지 않고 연봉에 대한 정보만 수집하며, 설문이 완 docs.google.com 채팅방 사용자수 1370분 중 총 61분이 참여해주셨습니다. 플러터에 관심있으신 분들이 모두 계시지만, ..

• format_list_bulleted etc
• · 2022. 4. 5.
• textsms