Dev_Log/Flutter&Dart
-
[Flutter&Dart] <Error> Image.network 에러: to load resource: net::ERR_FAILEDDev_Log/Flutter&Dart 2023. 5. 11. 13:30
오류 Image.network(url)을 통해 이미지를 불러올 때, 이미지가 표시되지 않는 에러가 발생한다. 로컬에서 빌드한 크롭 웹앱에서 발생하는 문제이며, VSC상의 debug console에는 나타나지 않는다. 크롬에서 F12키를 눌러 console에 들어가 오류를 확인하였다. 이미지가 CORS policy 때문에 block되었다는 내용이다. *CORS (Cross-Origin Resource Sharing) Chat GPT에게 어떤 내용인지 확인해보았다. 더보기 이 오류 메시지는 'http://localhost:63976' 출처에서 로드된 웹 페이지가 'http://www.mindgil.com/editor/cheditor_5/attach/20200811223229_dahmhhrl.jpg'에서 이미..
-
[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&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..
-
[Flutter&Dart] print(), debugPrint(), log()Dev_Log/Flutter&Dart 2023. 3. 21. 18:09
요약 print() 대신, debugPrint() 혹은 log()를 사용하자. 내용 Flutter 개발을 하다보면, 아래와 같은 경고 메시지가 등장한다. 더보기 Don't invoke 'print' in production code. Try using a logging framework. 링크되어있는 lint 공식 문서를 클릭해보면, production code에는 print()를 쓰지 말고, debugPrint() 혹은 log()를 사용하라고 권장한다. (혹은 kDebugMode에서만 동작하도록 조건문 사용) print() print()는 release mode로 빌드해도, logcat등에 그대로 출력된다. 사용자가 굳이 알지 않아도 될 내용 혹은 숨겨야 할 내용이 print()를 사용하여 출력되는 것..
-
[Flutter&Dart] shared_preferences Package 사용하기 - Easy Flutter Package #2Dev_Log/Flutter&Dart 2023. 3. 21. 02:26
SharedPreferences 상대적으로 적은 양의 키-값 데이터를 저장하고싶을때, 디스크(로컬)에 저장한다. Int, Double, Bool, String, StringList 등을 저장할 수 있다. 설치하기 flutter pub add shared_preferences 사용법 1. SharedPreferences Instance 가져오기 // Obtain shared preferences. final prefs = await SharedPreferences.getInstance(); // 전역 변수로 쓰기 위해, 메인함수 밖에서 사용해주었다. late SharedPreferences prefs; void main() async { // 바인딩 초기화: main() 함수에서 async를 쓰려면 필요 ..
-
[Flutter&Dart] flutter_animate Package를 이용해서 Click Animation 만들기 - Easy Flutter Package #1Dev_Log/Flutter&Dart 2023. 2. 25. 11:57
1. 토글 만들기 위젯 상단에 토글을 선언해준다. bool _toggle = false; 2. TapDown, TapUp 함수 넣기 onTapDow, onTapUp에 setState함수와, 토글을 넣고 빼는 함수를 넣어준다. onTapDown: (details) { setState(() { _toggle = true; }); }, onTapUp: (details) { setState(() { _toggle = false; }); }, 3. 애니메이션 함수 붙여주기 Card의 뒷부분 괄호에 .animate().scaleXY()를 붙여 애니메이션을 만들어준다. Card(child:...).animate(target: _toggle ? 0.5 : 0).scaleXY(end: 0.9), Easy Flutter ..