티스토리

욱쓰

검색하기

블로그 홈

욱쓰

black-glasses.tistory.com/m

개인 메일 주소 : rozyfactory@gmail.com

구독자: 2

방명록 방문하기

728x90

주요 글 목록

[Flutter] 유닛 테스트 해보기 플러터에서는 어떤 테스트 방법이 있을까?플러터에서는 크게 유닛 테스트, 위젯 테스트, 통합 테스트로 이루어져 있습니다. 이번 글에선 유닛 테스팅을 알아보도록 하겠습니다. Unit test유닛 테스팅은 메소트나 클래스처럼 작은 단위 즉 메서드, 클래스 같은 작은 단위를 테스트할 때 쓰입니다.1.1 Unit Testing - 다트 기본 테스트 프레임워크우선 test 라이브러리를 추가해 주세요.pubspec.yamldev_dependencies: test: test 폴더에다가 테스트 파일(testing_test.dart)을 만들어주세요.파일 이름은 항상 test로 끝나야 하며 main 함수에서 실행되어야 합니다.test/testing.dartvoid main() { test('test1', () { .. 공감수 0 댓글수 0 2024. 5. 25.
[Flutter][Json직렬화] 수동 직렬화 직렬화란 무엇일까? 네트워크 요청에서 직렬화란 '프로그래밍 언어의 객체를 네트워크로 전송할 수 있도록 가벼운 표준 데이터 형식으로 변환함'을 의미한다. 플러터는 직렬화를 수동 직렬화 또는 패키지를 이용한 직렬화 자동 생성 두가지 방법으로 수행하는데 오늘은 수동직렬화에 대해서 조금 알아보고자 한다. 실습에 들어가기 앞서 준비물이 필요한데 http패키지와 간단하게 json 객체를 받아올 수 있는 사이트다. https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev http://jsonplaceholder.typicode.com/ JSONPlaceh.. 공감수 0 댓글수 0 2022. 6. 29.
[Flutter] Error running process: CreateProcess faild Code2 해결방법 작업을 하다 환경변수를 잘못만져서 그런지 Error running process: CreateProcess faild Code2 라는 오류를 만나게 되었습니다. 여러가지 방법을 시도하다가 해결한 방법이 있어 공유하고자합니다. 방법은 간단합니다. 우선 sdkmanager에 들어가신다음 표시한 부분을 다운로드 받아주시면 되겠습니다. 공감수 1 댓글수 0 2022. 5. 21.
[Flutter] 플러터 이미지 확대하기 InteractiveViewer를 활용하자. 플러터에서 이미지를 확대하기 위해서 어떤 방법이 있을까 하고 찾아보다 좋은 위젯을 만났다. 현재 영어단어를 보고싶은데 이미지가 확대가 안되고 이렇게 봐선 뭐라고 쓰여있는지도 모르겠다. 이럴 땐 플러터에서 제공하는 InteractiveViewer로 해당 이미지를 보여주는 widget을 감싸주기만 하면 된다. InteractiveViewer( constrained: false, child: AssetThumb( asset: Asset(pickImage.image, "noimg.png", 400, 400), width: 400, height: 400, ), ), 안드로이드 스튜디오 에뮬레이터는 윈도우 기준으로 ctrl + 마우스로 줌이 가능하다. 또 한 InteractiveViewer는 플러터 Flutter .. 공감수 1 댓글수 0 2022. 2. 19.
[Study Picker] 스터디 피커 - 공부 기록 앱 (안드로이드) 02/04 업데이트 사항 안녕하세요 공부기록을 도와주는 공부 기록 앱 Study Picker입니다. 이번 업데이트 내용으로는 기존에 한글만 지원이 안되는 앱이었지만 업데이트 이후 영어를 추가 지원하게 되었습니다! 두번째로 그래프 UI를 변경했습니다 기존 갈색 그래프에서 색상을 변경하였습니다. 피드백은 언제나 환영합니다! 여러분의 목표에 조금 더 빠르게 도달하실 수 있도록 StudyPicker가 함께하겠습니다. https://play.google.com/store/apps/details?id=com.young.clip_picker 해당 링크를 통해 다운을 받으시거나 플레이스토어에 스터디피커라고 검색해주시면 다운받으실 수 있습니다 : ) 공감수 0 댓글수 0 2022. 2. 4.
[Flutter] [WARNING] Easy Localization: Localization key [XXX] not found 해결하기 안녕하세요! 한글에서 영어로 locale을 하기위해서 easy_localization이라는 패키지를 이용했는데요. 잘 되다가 [WARNING] Easy Localization: Localization key [xxx] not found 이라는 오류를 무한으로 발생시키더라구요. 혹시 저와같은 상황을 겪으시는 분들이 있으실까하여 해결방법을 공유하고자 합니다. 저는 터미널에 해당 코드를 작성했구요. flutter pub run easy_localization:generate --source-dir ./translations -f keys -o locale_keys.g.dart source-dir. 뒤부터 locale을 하기 위해 저장해둔 json파일이 있는 경로로 위치를 잡아주시면 됩니다. 저는 transla.. 공감수 4 댓글수 1 2022. 2. 3.
[앱 소개] Study Picker - 공부 기록 어플 (안드로이드) 안녕하세요! 포스팅이 조금 뜸했네요! 학업을 병행하거나 시험을 준비하실 때 이거 외워야지! 하고 사진을 찍어두면 어느 순간 잊어버려 갤러리에만 쌓이는 그런 경험 다들 있지 않으신가요? 저는 유독 정리에도 약하고 잘 잊어버리는 편이라 이런 단점을 보완해주는 어플이 있으면 좋다고 생각해 공부 기록 어플인 Study Picker라는 앱을 개발하게 되었습니다. Study Picker는 오늘 얼마나 공부했는지 또 어떤 과목을 공부했는지 그 과목을 어느 정도로 열심히 했는지를 이용자가 한눈에 알아볼 수 있어 쉽고 빠르고 간편합니다! 또 이용자가 카드 색상도 스스로 지정할 수 있답니다^-^ 기록하는게 익숙하지 않으시고 어려우신가요? Study Picker는 터치 "한번"으로 어떤 공부를 얼마나 했는지 기록이 가능해 .. 공감수 1 댓글수 0 2022. 1. 31.
[Flutter] Container 둥글기 주기,그림자 효과 border,shadow 안녕하세요. 욱쓰입니다. 밋밋한 Container에 둥글기와 그림자 효과를 적용해보고 알아보는 포스팅을 작성하겠습니다. 전체 둥글기 Container( width: 200, height: 200, decoration: BoxDecoration( color: Colors.teal, borderRadius: BorderRadius.circular(20), ), ) bottomRight에 둥글기 주기 (한쪽에만 둥글기 주기) Container( width: 200, height: 200, decoration: BoxDecoration( color: Colors.teal, borderRadius: BorderRadius.only(bottomRight:Radius.circular(30)), ), ) bottomL.. 공감수 4 댓글수 0 2022. 1. 12.
[Flutter] flutter 상태바(Status Bar) 숨기기 위 이미지처럼 StatusBar가 거슬릴 때가 있는데 둘 다 제거하는 방법과 상단과 하단을 따로따로 제거하는 방법을 함께 알아보는 시간을 가졌으면 좋겠습니다. 우선 packge를 불러온 후에 build함수 안에 해당 코드를 넣어주면 됩니다. import 'package:flutter/services.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'news_main.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key);.. 공감수 0 댓글수 0 2022. 1. 10.
[Flutter] 배달의 민족 댓글을 코딩으로? (dart class연습) 이전에 인터넷을 보다가 재밌는 짤을 보게되었는데요. 코딩빌런님이 댓글을 코딩으로 작성하셨더라구요. 정말 신박한 컨셉이라 저도 class 공부도 할겸 dart언어로 코딩빌런님의 의도를 계승받아 작성해보겠습니다. 공부하더라도 재밌게 공부하는게 좋으니까요 ! 우선 Review라는 클래스에 맛,양,배달시간과 저는 추가로 who라는 리뷰하는 사람을 입력하는 변수하나를 작성해주고 생성자를 만들어주었습니다. class Review { int taste; int amount; int deliveryTime; String who; Review(this.taste, this.amount, this.deliveryTime,this.who);} 다음 reviewPrint라는 함수하나를 만들어주겠습니다. 이 함수에는 각 항목에.. 공감수 2 댓글수 1 2022. 1. 2.
[Flutter] 공공데이터포털 api를 이용한 미세먼지 앱 예제 학습한 정보를 바탕으로 api 플러터를 이용해 공공 데이터 포털 미세먼지 데이터를 가져와 앱을 제작해보았습니다. 기준 시간 이전에 미세먼지 기록들을 리스트로 불러와 확인이 가능하고 한눈에 쉽게 미세먼지 정보 확인이 가능하게끔 텍스트를 큼직하게 제작해보았습니다. 참고해서 필요한 부분을 수정하시며 그려보시면 많은 도움이 되실 것 같습니다 공감수 0 댓글수 0 2022. 1. 1.
[Fluttet] 플러터 앱 예제 가게 이름 선택하기 예제 (하) (삼항연산자) 안녕하세요! 이전에 했던 예제를 이어서 진행해보겠습니다. price와 title은 가져와보셨나요? Stack( children: [ ClipRRect( borderRadius: BorderRadius.circular(60), child: Container( width: 80, height: 80, child: Image.network( foodList[index]["image"], fit: BoxFit.cover, ))), Padding( padding: EdgeInsets.only(left: 110.0), child: Text( foodList[index]["title"], style: TextStyle( fontWeight: FontWeight.bold, fontSize: 21), ), ), Padd.. 공감수 0 댓글수 0 2022. 1. 1.
[Flutter] 플러터 앱 예제 가게 이름 선택하기 (상) (map 활용하기) 안녕하세요 사랑니 뽑기 전에 긴장된 마음을 가라앉히고자 만든 간단한 가게 이름 선택 예제 앱을 만들어 보았습니다. 제작하면서 머릿속에 흐트러져있는 개념도 정리하고 정보도 나누고 싶어 작성하는 것이니 부족한 점이 있다면 피드백 주셔도 괜찮습니다. 우선 완성된 앱은 이렇습니다. 각자 취향에 따라 좋아하는 이미지와 텍스트를 입력하셔도 됩니다! 우선 StatefulWidget으로 foodList라는 List를 하나 만들어주었습니다. List foodList = [ { "title": "군침이 마카롱", "price": 3900, "image": "https://t1.daumcdn.net/cfile/tistory/99758C355F7F04AA25", "thx": "반갑습니다." }, { "title": "햄깅이 .. 공감수 1 댓글수 0 2021. 12. 30.
성경말씀 한줄과 함께 하루를 마무리하는 일기앱 추천 [하루 성경 일기] 안녕하세요 여러분들은 신년 초 계획은 다들 세우셨나요? 저는 매일 일기와 성경 기록을 함께 기록하고 싶은 계획을 가졌답니다! 따로따로 기록하기엔 너무 번거롭기도 하고 관리도 힘드니 둘 다 기록할 수 있는 어플이 있을까 하고 찾아보니.. 없더라고요. 그래서 제가 만들었습니다! 내가 언제 기록했는지 알 수 있는 달력과 함께 일기를 작성해 나가실 수 있고, 간단하게 터치 한번으로 내 하루 감정을 정리할 수 있게 디자인했습니다. "혹시 깜빡하면 어쩌지.?"라는 분들을 위해 알람 기능도 하루 두 번 알람을 제공합니다! 올해부턴 하루 성경 일기와 함께 성경말씀을 기록하며 은혜받는 한 해를 보내셨으면 합니다. 하루 성경 일기가 좋은 습관을 만드는데 도움을 드리겠습니다. https://play.google.com/st.. 공감수 6 댓글수 2 2021. 12. 26.
[Flutter] BottomNavigationBarItem laberText Stryle 적용하기 BottomNavigationBar에 item 속성에 label을 수정하려면 item에 바깥으로 나와 selectLabelStyle을 적용해주면 됩니다. bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.today,color: Palette.bottomColor,), label: "기록", ), BottomNavigationBarItem( icon: Icon(Icons.calendar_today_outlined), label: "기록 모아보기", ), BottomNavigationBarItem( icon: Icon(Icons.bar_chart), label: "통계", ), ], selec.. 공감수 1 댓글수 2 2021. 12. 13.
[Flutter] Listview.builder를 사용한 예제만들기 (Listview.builder를 사용해봅시다.) 안녕하세요 뿔테 안경의 플러터 이야기입니다. 오늘은 listview.builder를 사용해 예제를 만들어 보려고 합니다. 제가 준비한 예제는 해당 widget을 터치하면 텍스트 필드에 즉시 반영이 되는 기능입니다. 선택 가능한 widget들을 만들기 위해서 listview.builder을 활용했습니다. List iconList = [ '안녕하세요 🙌', '뿔테안경의 플러터 🤩', 'Cool 👍🏼', 'Amazing 👍🏼', ]; 우선 list를 String타입으로 만들어주었습니다. 다음 listview.builder에 높이와 넓이를 지정하기 위해 Container에 높이를 설정해 주었습니다. Container( width: MediaQuery.of(context).size.width, height: 10.. 공감수 2 댓글수 0 2021. 12. 4.
[Flutter] Flutter에서 Hex값을 사용해 색상을 설정하려면? 안녕하세요 뿔테 안경의 플러터이야기입니다. 늘 Ui 디자인을 할 때 flutter material에 한정적인 색상 때문에 한정적인 디자인을 할 수밖에 없었는데요. 이번에 Hex값을 이용해 색상을 지정할 수 있는 방법을 우연히 알게 되어 공유하고자 합니다. Flutter에서 Color의 클래스는 오직 정수만 변수로 받기때문에 문자열인 Hex의 값을 정수로 바꿔준다면 사용이 가능합니다. 그 과정에서 불투명도를 꼭 지정해주셔야 하는데요. 불투명도를 16진수로 변환한다면 ff이고 0xff뒤에 Hex값을 붙이면 사용이 가능합니다. import 'package:flutter/material.dart'; import 'package:flutter/painting.dart'; class Palette{ static c.. 공감수 1 댓글수 0 2021. 12. 3.
[Flutter] Object 활용하여 리스트뷰에 적용해보기 안녕하세요. 뿔테 안경의 플러터 이야기입니다. 오늘은 object를 활용해 리스트 뷰를 작성하는 방법을 배워 함께 공유하려고 합니다. 저는 책 카테고리를 만들기 위해서 ListView를 활용했습니다. image라는 Object를 만들어 각각의 카테고리의 이름과 이미지를 key, value 형태로 저장했습니다. 저는 ListView.builder에 count를 4로 설정했지만 object에 length로 길이 설정을 하시는 것을 권장드립니다. 다음 image에 DecorationImage를 불러와 미리 저장해놓은 경로 lib/assets/에 objectValues의 index를 추가해줍니다. 저는 container에 사이즈를 미리 지정해뒀고 그 사이즈를 채우는 이미지 크기를 원했기 때문에 fit: Boxf.. 공감수 2 댓글수 0 2021. 11. 30.
[Flutter] carousel_slider을 사용해보자 결제창을 만드는 도중 carousel_slider를 사용할 필요가 있어 배운 내용을 공유해보려 합니다. 저는 이미지를 리스트에 String타입으로 저장을 했습니다. 이후에 items에 imgList를 지정해준 다음 Map으로 변환시킨 후 위젯들을 반환해줬습니다. CarouseOptions에는 다양한 기능들이 있는데 하나하나 지정해보시면서 사용해보시면 Ui를 디자인하시는데 도움이 될 것 같습니다. 저는 특히 autoPlay기능이 너무 마음에 들었는데요. 일정한 시간이 지남에 따라 자동으로 이미지가 슬라이드 됩니다. 물론 Duration을 통해서 시간을 조절할 수 도 있습니다. 조금이나마 도움이 되셨다면 하트눌러주시면 큰 도움이 됩니다. 감사합니다. 공감수 1 댓글수 0 2021. 11. 26.
[Flutter] flutter Api로 불러온 일부 텍스트 변경하기 안녕하세요 뿔테안경의 플러터 이야기입니다. 최근 네이버 도서 검색 api를 활용해 플러터 작업을 하던 도중 api로 가져온 책 문자에 특정 헤더가 함께 딸려와 작업을 하는데 골머리를 앓다 해결 방법을 알게되어 공유하려합니다. 현재 앱바에 책 제목을 넣는 작업을 하는데 위 사진과 같이 특정 헤더가 나옵니다. 저 같은 경우에는 이 문제를 해결하기 위해선 replaceAll이라는 문자열 StringMethod를 이용해 제거했습니다. replaceAll StringMethod는 특정 문자가 일치하면 특정문자를 지정한 문자로 변경해주는 StringMethod입니다. 간단한 정보이지만 도움이 되셨다면 댓글이나 하트 한번씩 눌러주시면 큰 힘이 됩니다. 감사합니다!! 공감수 1 댓글수 0 2021. 11. 22.
[Flutter] Prefer const with constant constructors 해결방법 안녕하세요. 뿔테 안경 개발자입니다. 최근 flutter 팀에서 flutter_lints라는 새 패키지를 만들었는데 analysis_options.yaml에 기본적으로 추가됩니다. 이전에 하던 방식으로 코드를 작성하려 하니 눈에 거슬리는 밑줄들이 보여서 신경이 많이 쓰였는데요. prefer const with constant constructors 오류를 해결하기 위해선 여러 가지 방법이 있는데 파일 상단에 무시 줄 주석을 추가해주는 방법이 있습니다. // ignore_for_file: prefer_const_constructors 이렇게 추가해주면 오류가 사라집니다. 또 다른 방법으로는 analysis_options.yaml파일을 열고 다음 린터 규칙을 추가합니다. rules 하단에 세가지를 추가해주시.. 공감수 29 댓글수 0 2021. 10. 21.
[Flutter] AppBar에 Gradient를 사용해 꾸며보자 안녕하세요 뿔테 안경 개발자입니다 :) AppBar에 Gradient 속성을 부여할 수 있다는 것 알고 계셨나요? 잘 사용한다면 밋밋한 AppBar에 활력을 불어놓아 줄 Gradient 속성을 소개하고자 합니다. 아래에 AppBar 구성은 위 코드와 같습니다. 리스트 안에 담긴 Color들을 변경해주면 입맛에 따라 색상을 변경할 수 있으며 Alignment를 조정해주면 Gradient가 퍼지는 위치 변경이 가능합니다. 도움이 되셨다면 하트한번씩 눌러주시면 저에게 큰 힘이 됩니다. 감사합니다. 공감수 2 댓글수 0 2021. 10. 21.
[Flutter] AppBar에 대해서 알아보자. 안녕하세요. 뿔테 안경 개발자입니다. 오늘은 앱의 꽃이라고 생각되는 AppBar에 대해서 알아보려고 합니다. 우선 기본적으로 제공되는 AppBar입니다. 일반적으로 AppBar는 Scaffold 안에서 생성이 가능합니다. 이제 AppBar의 타이틀을 변경해보고 중앙으로 옮겨도 보겠습니다. 타이틀을 중앙으로 위치시키려면 centerTitle에 값을 true로 주시면 됩니다. false를 주게 된다면 원상태로 복구가 됩니다. 다음으로는 AppBar의 색상과 높이를 변경해보도록 하겠습니다. 저는 grey 색상으로 변경하고 높이는 0으로 지정해보겠습니다. 높이는 elevation을 사용해서 조절이 가능합니다. elevation은 기본적으로 double(소수) 값을 받기 때문에 0.0으로 지정해줬습니다. 제법 그.. 공감수 5 댓글수 0 2021. 10. 21.
[Flutter] Gridview.count 위젯 사용시 스크롤이 되지않을때 해결방법 플러터에서 GridView 위젯을 사용할 때 스크롤이 되지 않을 때가 있습니다. 저도 이 문제를 해결하기위해 꽤 고생했는데요. 방법은 간단했습니다. GridView내에서 physics: ScrollPhysics(), 를 추가해주니 문제가 해결되었습니다. 방법이 도움이 되셨다면 하트 한번 눌러주세요! 저에겐 큰 도움이 됩니다. 감사합니다 공감수 4 댓글수 0 2021. 10. 17.
[Flutter] 공공 데이터 Encoding API키가 적용이 안될때 방법 공공 데이터를 신청해서 작업을 할 때 Encoding 된 키가 적용이 안돼서 여러 시도 끝에 해결했습니다. EncodigKey가 %%3D%3D 로 끝나는 경우 https://meyerweb.com/eric/tools/dencoder/ 해당 링크로 접속하셔서 Decode 작업이 필요합니다. Decode 작업을 끝냈을 경우 키가 == 로 끝이 나실 건데 Decoding 작업을 끝낸 키를 다시 적용하시면 정상적으로 작동이 될 것입니다. 공감수 2 댓글수 0 2021. 10. 17.
가사를 기록해보자, 가사 기록 앱 [가사집] 바쁜 일상 속에 다들 어떤 방법으로 마음을 달래시나요? 저는 노래를 들으며 그 노래에 가사들로 위로를 받곤 한답니다. 그러다 힘이 되어주는 가사들을 꺼내보고 싶을 때 꺼내보며, 소중히 간직할 수 있는 방법이 있을까 고민을 하다 가사집이라는 어플을 개발하게 되었습니다. 저처럼 지친 하루를 버틸 수 있게 하는 노래 가사들을 속으로만 간직하고만 계셨다면 지금부터는 가사집 어플을 통해 가사들을 간직하는 것은 어떨까요? 감성 깊은 밤에 가사집의 흰 바탕이 가사 작성의 방해가 될까 봐 다크 모드를 추가해보았습니다. 개인적으로 야간 시외버스를 탈 기회가 많았는데 그때 버스 창가에 기대어 가사를 작성할 때 굉장히 도움이 되었습니다. 작성자님이 작성하신 가사들을 선택하시면 해당하는 가사만 보여드릴 수 있게끔 UI를 구성.. 공감수 5 댓글수 0 2021. 10. 16.
[Flutter]MediaQuery를 적용한 Padding 값 입력시 오류 해결 방법 디바이스 기기마다 각자 고유의 크기가 존재하는데 이에 대응하기 위해선 반응형을 사용해야 합니다 반응형으로는 흔히들 MediaQuery를 이용해 자주 구현하시는데 저도 최근에 MediaQuery를 활용해 앱을 개발하다가 유독 Padding 값에 MediaQuery변수를 입력할 때 오류가 생겨 의문이 들었습니다. 우선 저는 이런 식으로 각각 변숫값에 width와 height를 따로 적용하여 사용했습니다. MediaQuery에 대해서는 이후에 같이 대화를 나누어보겠습니다. 이 오류에 대한 해결방법은 다음과 같습니다. 그저 EdgeInsets 앞에 붙은 const라는 키워드를 없애면 오류가 사라집니다. const 키워드는 한번 변수에 설정한 값은 다시 재설정할 수 없으며, const로 정의한 상수는 런타임에서 .. 공감수 2 댓글수 0 2021. 10. 12.
[Flutter] D8: Cannot fit requested classes in a single dex file (# methods: 66953 > 65536) 대한 오류 해결방법 플러터로 앱 개발을 하다 규모가 커지게 되면 코드도 많아지면서 라이브러리도 또한 많아지게됩니다. 이럴때 나타나는 오류로 해결방법은 의외로 간단했습니다. 앱 하단에 build.gradle에 들어가서 multiDexEnabled true 를 추가해주시면 됩니다. 왜 멀티DEX에러가 발생하는 걸까? 너무 많은 메소드를 가져와서 실행을 하려고 하니 박스가 가득찬 탓에 메소드를 담을 그릇이 부족하기 때문에 박스를 더 추가하라고 요구하는 것입니다. 공감수 4 댓글수 0 2021. 10. 12.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.