develop/Flutter 34

Flutter 화면 방향 Orientation에 따라 레이아웃 변경 Landscape Portrait 뜻

세로, 가로 방향에 따라 레이아웃을 다르게 생성해야 할 때가 있다. 각각의 위젯들을 모듈화 시키고 그 모듈을 방향이 바뀔때마다 레이아웃을 변경해주는 것이다. 모바일은 레이아웃에 영향을 덜 받지만, 태블릿의 경우는 레이아웃을 다르게 적용해야 할 때가 많다. 용어정리 먼저 용어를 정리하자면 Orientation : 방향 Portrait : 세로 Landscape : 가로 사실 Orientation은 방향성을 Portrait는 초상화 Landscape는 풍경화를 뜻한다. Portrait - tall | Landscape - wide Orientation eunm에서 확인할 수 있다. 적용방법 일단 편하게 하는 방법은 OrientaionBuilder 을 사용하는 것이다. 사용방법은 다른 빌더를 사용하는 것과 동..

develop/Flutter 2023.07.28

[flutter] SKAdNetwork 앱 광고 추적 허용 요청하기 in iOS

광고 추적 허용을 요청해야 광고 효율이 올라가고 단가가 올라간다는 말을 듣고 바로 skAdnetwork를 적용하기로 했다. 1. 플러그인 설치하기 https://pub.dev/packages/app_tracking_transparency app_tracking_transparency | Flutter Package This Flutter plugin allows you to display ios tracking authorization dialogue and request permission to collect data. pub.dev flutter pub add app_tracking_transparency 2. 광고 추적 요청하기 main.dart 혹은 요청할 화면에서 아래 코드 사용하기 String..

develop/Flutter 2023.05.19

[Flutter] 효과음 재생 시 백그라운드 뮤직 정지 되는 문제 야매로 해결하기 (다른 앱의 소리와 효과음이 동시에 재생되게 하기)

만 이틀을 고생하다, 알게된 방법을 공유하고자 한다. 사실, 너무 간단하고 라이브러리만 교체한거라 당황스럽지만, 어쨌든 해결 해서 기쁜 마음으로 공유한다. 사실 내가 원했던건 이게 아니지만, 뭐.. 너무 힘든걸 어쩌겠어 다음 업데이트때 해결한드앗!! 라이브러리 audioplayers 라이브러리를 사용하는 것이다. https://pub.dev/packages/audioplayers audioplayers | Flutter Package A Flutter plugin to play multiple audio files simultaneously pub.dev import 'package:audioplayers/audioplayers.dart'; 사용방법 static AudioPlayer player = Au..

develop/Flutter 2023.05.17

[Flutter] Switch on/off 버튼 사용하기 (iOS와 AOS) - setting 화면 만들기

on / off 를 할때, switch만큼 유용한게 없는것 같다 아래와 같은 버튼들을 만들어 보자 Switch Button 만들기 우선 변수를 하나 만들고 bool _isChecked = false; 사용하는 방법은 매우 간단한데, 먼저 AOS 스타일 (Material) Switch( value: _isChecked, onChanged: (value) { setState(() { _isChecked = value; }); }, ), iOS 스타일 (Cupertino) CupertinoSwitch( value: _isChecked, activeColor: CupertinoColors.activeBlue, onChanged: (bool? value) { setState(() { _isChecked = val..

develop/Flutter 2023.04.18

[Flutter] dropdown button 만들기 iOS 스타일과 안드로이드 스타일

Cupertino와 Material 우선 Cupertino는 iOS 스타일이고, Material은 android 스타일이다. Material app 으로 감싸고 있든, cupertino 로 감싸고 있든 dropdown은 어떤 스타일이든 만들 수 있다. dropdown button 만들기 iOS스타일 우선 iOS 스타일로 dropdown 을 만들때에는 아래의 공식 사이트를 참고 했다. https://docs.flutter.dev/development/ui/widgets/cupertino Cupertino (iOS-style) widgets A catalog of Flutter's widgets implementing the Cupertino design language. docs.flutter.dev //..

develop/Flutter 2023.04.17

[flutter] json Dart Model 객체로 맵핑하기 라이브러리 X 웹으로 생성

iOS로 개발하기로 해놓고 냅다 flutter 다시하기,,, 한입으로 두말하기 넘 자연스럽다~ .fromJson, .toJson 함수로 일일이 맵핑하기에는 좀,,,,,, 귀찮다.. 라이브러리가 있지만, 솔직히 소규모는 필요없다.. 개인개발자들에게는, 그리고 라이브러리,, 가 더 귀찮은 나 같은 개발자 json을 넣으면 Model 객체를 생성해주는 서비스가 많은데 dart라고 없을까..! Json 값을 넣으면 dart 모델 생성할 수 있다. https://javiercbk.github.io/json_to_dart/ JSON to Dart JSON to Dart Paste your JSON in the textarea below, click convert and get your Dart classes for..

develop/Flutter 2023.04.14

[Flutter] 그림자 버튼 만들기 BoxShadow 사용하기

요즘 유행하는 그림자 버튼 UI를 만들어 보자 BoxShadow를 사용하여 그림자를 줄 수 있다. GestureDetector를 사용했지만, 버튼으로 감싸도 가능.. GestureDetector( onTap: (){// Action}, child: Container( decoration: BoxDecoration( color: Colors.white, // background color boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 7, offset: Offset(0, 1), ), ], shape: BoxShape.circle, ), child: Container( margin: EdgeIn..

develop/Flutter 2023.04.09

[Flutter] iOS 개발에서 Flutter, 다시 iOS 개발자로 (Flutter 개발 후기)

iOS개발자에서 Flutter 개발자로 생계형 개발자인 본인은 안드랑 iOS랑 같이 빌드를 해서 부자가 되겠다는 부푼 꿈을 안고 flutter 개발에 뛰어 들었다. ... 뛰어만 들었다. 뭐,, 다른 이유 없이 단순계산으로 iOS앱을 안드에도 배포하면 수익이 2배!! 하며 플루터 개발을 시작한것이다. 정말 크로스 플랫폼이라는 이유로 뭐,, iOS 개발이 잘 맞았으니, flutter도 잘 맞겠지라며 안일한 생각으로 시작했다. 언제나 그렇듯 가벼운 마음으로, 푼돈이라도 벌어보자는 마음으로, 그 결과.. Flutter 개발자에서 다시 iOS개발자로 아이폰 5부터 애플 생태계를 벗어난적 없는 앱등이에게는 flutter의 기본 디자인이 너무 구렸지만 어떻게든 원하는대로 만들어 가려고 했다. 다만, 나는 디자이너 ..

develop/Flutter 2023.03.08

[Flutter] iOS16업데이트 이후 Flutter 아이폰 기기 연결 안됨 해결하기

OS를 16으로 업데이트 이후 갑자기 폰 연결이 안되어서 실 기기에 빌드 하지 못하고 있었다. 하지만,, 파워 귀찮음으로 그저 시뮬레이터에만 돌렸다 하지만 미룰 수 없어 나의 업데이트.. Xcode 업데이트 마저 하고 빌드하려고 방법을 찾던중 문제 확인하기 flutter doctor 돌리고 나니 ! Error: E의 Apple Watch needs to connect to determine its availability. Check the connection between the device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to be restarted an..

develop/Flutter 2023.02.12

[Flutter] Theme 다크모드 라이트모드 설정 하기 - 시스템 모드로 사용하기

dark 모드가 세상에 나오고 개발자들과 디자이너들은 더 귀찮고 힘들어진것 같다. 물론 iOS13이후로 눈이 더 편해진 것은 사실이지만 말이다. 사용자 입장에서는 정말 편한데, 개발자와 디자이너들은 뭐.. 귀찮을 뿐이지만 말이다. 그래도 사용자 친화적으로 개발을 하기 위해서는 다크모드와 라이트모드를 모두 지원하는게 좋은 방법 중 하나이며 그렇게 하는건 역시나 귀찮다. 하지만 iOS에 비해 flutter는 파일만 복사 붙여넣기로 증식하면 되서 나름... 편한거 같다. (내 기준) Theme 사용 선언하기 그럼 다크모드를 설정해보자! Theme을 메인에서 설정해주어야 하는 부분이 있는데, 아래와 같이 적용하면 된다. main.dart void main() async { WidgetsFlutterBinding..

develop/Flutter 2023.02.10