전체 글 (34) 썸네일형 리스트형 [Flutter.241209] HTML 태그 처리해서 화면 만들기 플러터 과제로 네이버 OpenAPI를 사용해 보고 있다.처음 사용해 본다. 사용자가 키워드를 입력하면, 그 키워드에 걸리는 지역 정보 최대 5개를 출력해서 보여준다. 아무거나 입력해서 테스트 하다 보니, 예상치 못한 태그가 화면에 표시되고 있었다. '여의도'를 검색해 봤다. 예상치 못한 HTML 태그.. 첫 번째로 떠오른 해결 방법은 정규식을 이용해서 태그 비스무리한 친구들을 모조리 다 지워버리는 것이다. 조금 더 찾아보니 아예 렌더링 해서 보여주는 방법도 있었다. 두 개 다 해봐야겠다. 1. 정규식을 이용해서 태그 비스무리한거 다 지워버리기함수를 만든다. 이름은 removeHtmlTags().String removeHtmlTags(String text) { final RegExp .. [Flutter.241206] iOS 시뮬레이터 항상 위 고정하기 나는 궁금했다. 어떻게 iOS 시뮬레이터를 항상 위에 고정시키는지. 구글에 다양한 키워드로 검색해 보았고, yabai, rectangle, AppleScript 등 다양한 방법이 있었다. 하지만 가장 쉬운 방법은 등잔 밑에 있었다. 등잔 밑이 어둡다더니... 시뮬레이터의 메뉴 바 이다. 여기서 'Windows'를 누른다. 그러면 'Stay on Top' 이게 있다. 이걸 눌러놓으면, 코드 작업중에도 맨 앞에 시뮬레이터가 둥둥둥 떠 있다. 이런.. 이런 쉬운 방법이... [Flutter.241125] JSON 속 정수를 원화 금액으로 표현하는 함수 만들기 사용할 JSON 파일이 있다. 여기에서 각각의 데이터 항목 'price'는 '20000' 이런 식으로 정수로 들어가 있다. 앱 화면에 "20000 원" 이렇게 써 있으면 너무 어색하고, 올바르지 않다. 원화 표기 기준에 맞춰서 "20,000 원" 이렇게 표현되어야 마음이 놓인다. 이런 경우에 사용할 간단한 함수를 만들었다. 컴마로 자릿수 구분하지 않는 나라에서는 컴마 자리에 온점..(이름 맞나..?)을 넣어주면 될 것 같다. String wonCurrency(int price) { return "${price.toString().replaceAllMapped( RegExp(r'(\d)(?=(\d{3})+(?!\d))'), (match) => '${match[1]},', .. [Flutter.241122] Flutter에서 JSON 파일 로드하기 JSON 데이터를 화면에 뿌려주려고 한다. 어떻게 하는지 찾아보았다. Step 1. pubspec.yaml 파일에 .json 확장자의 파일 위치들을 assets 안에 넣어준다. assets: - lib/mock_data/ask.json - lib/mock_data/help.json 이런식으로 로드하고자 하는 파일의 경로를 추가하고 저장한다.나는 assets 아래에는 이미지만 들어가는 줄 알았는데, 아니구나. 생각해 보니 Image만 받을 내용이었으면 이름을 Image로 애초에 하지 않았을까 싶다. 그냥 이렇게 넣으면 어떨까? assets: - lib/mock_data/ 하지만 나는 행여 데이터 못 읽어올까 마음이 쫄린 나머지, 그냥 각각의 파일을 다 넣어 줬다. 첫 번째 코드 블럭대.. [Flutter.241115] 길고 긴 리스트를 다뤄야 할 때에는 ListView.builder 서너개의 리스트 항목을 보여주는 것은 ListView() 만으로 충분하다.하지만 사용자가 보유한 수십개의 게임 아이템 중에 선택을 해야 하는 화면을 만들어야 한다거나,출발하고 도착할 지하철 역을 리스트에서 고르는 화면을 만들어야 한다면,혹은 키워드에 걸린 검색 결과 리스트를 뽑아주는 화면을 만들어야 한다면? 리스트 항목이 적어도 열개는 넘을테니 이럴 때에는 ListView.builder를 사용하는 것을 고려해 봅시다. 참조한 문서는 다음과 같다. https://docs.flutter.dev/cookbook/lists/long-lists Work with long listsUse ListView.builder to implement a long or infinite list.docs.flutter.de.. [Flutter.241114] 왜 본인의 상태를 자기가 관리하지 않고, 위에 떠넘기지? 제목은 오늘 배운 것 중에 가장 중요하다고 생각되는 것을 중심으로 만들었고,나머지는 오늘 배운 이것저것들의 나열이다. 1. 각각의 위젯이 아니라, 상위 위젯에서 상태를 관리 하는 이유는 뭐지?사실 정답은 없다. 다양한 방식으로 상태 관리를 진행할 수 있다. 즉 프로그램 작성자의 취향이나, 선호에 따라 달라질 수 있는 부분. (참조: https://docs.flutter.dev/ui/interactivity) Add interactivity to your Flutter appHow to implement a stateful widget that responds to taps.docs.flutter.dev 하지만, 지금 내가 공부하고 있는 BMI 수치를 출력하는 앱의 경우에 한정해서, 사용자가 터치해서.. [Flutter.241112] 오늘 배운 간단한 6개 1. SizedBox는 간단하게 아이템 사이의 간격 조절할 때 쓰기 좋다. 좌우 간격이 필요한 경우에는 SizedBox(width: 20), 이런 식으로상하 간격이 필요한 경우에는 SizedBox(height:20), 이런 식으로. 2. Container에서는 BorderRadius 값으로 둥글게 모서리 깎는데, 이미지의 경우 ClipRRect를 자주 쓰나보다. 자식 위젯의 모서리를 둥글게!ClipRRect는 Clip Rounded Rectangle 이걸 가지고 만든 이름인가보다. 이름 아주 잘 짓는구만. 3. StatefulWidget은 변경 가능한 상태를 가진 위젯.StatelessWIdget은 변경 가능한 상태가 없는 위젯. 4.플러터 프로젝트 만들 때, 원하는 플랫폼만 찍어서 생성하기flutter.. [Flutter.241111] MVVM이 뭐지? 등등 오늘 배운 것들 일부 1. 플러터를 공부중이라서 flutter를 키워드로 채용 공고를 조금 찾아봤다. 그 중에 "MVVM에 대한 높은 이해" 라는 구문을 발견했다. 뭔가 중요한 것들이니 채용 공고에서 명시해서 요구했겠지. 그런데 이 세 단어 모두 오늘 처음 보았다. 그래서 알아보기로 했다. 앞으로 공부하면서 더 잘 알게 될테니, 얕은 예습 정도를 해 보겠다. MVVM(Model-view-ViewModel)플러터에서만 사용되는게 아니고, 그냥 아키텍처 패턴의 한 종류인가보다. MVVM은 애플리케이션의 코드 구조를 체계적으로 정리하기 위해 사용된다. 사용자 인터페이스(UI) 코드와 비즈니스 로직을 분리하는데 도움이 된다고 한다. 높은 코드의 재사용성, 유지보수성, 테스트 용이성! 이름에서부터 알 수 있듯 세 개의 요소로 이뤄진.. 이전 1 2 3 4 5 다음
