전체 글 (15) 썸네일형 리스트형 [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) 코드와 비즈니스 로직을 분리하는데 도움이 된다고 한다. 높은 코드의 재사용성, 유지보수성, 테스트 용이성! 이름에서부터 알 수 있듯 세 개의 요소로 이뤄진.. [Dart.241108] 텍스트 게임을 만들다가 이런걸 배웠다. 1. 어떤 프로그램 만들기 전에는, 설계를 정확하게 하고 시작하자. 컴퓨터에겐 간단하겠지만, 내 작은 우동사리에게는 만만치 않다.2. 항상 생각하면서 코드를 고치자.. 텍스트 게임을 만드는 것을 만만히 보았다. 그냥 대충 클래스 몇 개 만들고 하면 되지 않을까 하였다.그리고 그것은 오산이었다. 내 머리는 그리 똑똑하지 않았다. 몇 개 클래스 안되는데 사실, 캐릭터 클래스랑, 배틀 전투 클래스랑 뭐 이정도인데, 예외 처리 하고 루프 몇 개 돌리고 하니까 머릿속이 복잡해 지는 것이다. 이 때 깨달았다. 왜 팀장님이 프로젝트 시작하시기 전에 다이어그램으로 전체 설계 도면부터 만들고 공유하시면서 시작하셨는지. 여기서 1번을 배웠다. 어떤 프로그램 만들던간에, 설계를 정확하게 하고 시작하자. 간단할 것 같아서 .. [VSCode.241107] 프리티어를 설치 했는데도 예쁘게 저장이 안 될 때 보통 프리티어 설치하고나면 대충 코드 여백 안맞추고 써도 cmd+s (저장) 하면 이쁘게 여백이 가지런히! 맞춰지곤 했다. 하지만 새 환경에 vscode를 설치하고, 프리티어도 인스톨 하였는데, 가!지!런!히! 저장이 되지 않는 것이다. 그럴 때에는 환경 설정을 다시 확인해 주어야 한다. 2개만 체크해 보면 될 것 같다. 0. 설정에 들어가기cmd+, (혹은 윈도우라면 ctrl+,) 이렇게 누르면 VScode에서 Settings 탭이 열린다. 1. Default formatter 확인하기Settings 탭에서 'default formatter'를 검색하면 걸리는게 나온다.나 같은 경우는 No formatter였다. (왜 내가 설치했는데 자동으로 안넣어준거야? ㅜㅜ) 그래서 드롭다운 버튼 눌러서 Pret.. [Dart.241106] 다트에서 사용자 입력값 한 줄에 받기 사용자 입력값 받는 다양한 방법이 있다. 구글 검색해서도 많이 나온다. 대충 구글에 'dart get user input' 이런 키워드로 검색하고, 상단에 노출된 스택 오버플로에서는 다음과 같은 힌트를 준다. import "dart:io";void main() { print("enter name:"); String name = stdin.readLineSync()!; print("your name is: $name");} 아주 잘 돌아간다. 그런데 나는 견딜 수 없는 지점이 있었다. 왜 질문 "enter name:" 이 다음 부분에 유저 인풋을 넣을 수 있게 커서가 위치하지 않고, 그 다음 줄에!! 커서가 위치하는건가? 그래서 더 찾아보았다. 나는, 저 커서가 바로 콜론 다음에! 위치하면 기분.. 이전 1 2 다음
