comFFuny comFFuny

이번에는 메모를 작성하는 화면을 만들어 보겠습니다. 새로운 화면이기때문에 새로운 dart 파일을 만들어 줍니다. note_edit_page.dart 파일을 만들어 주고 statefulWidget로 만들어 준뒤 클래스 명을 NoteEditPage로 지정해줍니다. material로 import해주시면 됩니다. Scaffold를 만들어 주신 후 appBar에 title을 Text로 노트 편집으로 작성해 줍니다. body는 Column으로 만드시고 mainAxisSize는 min으로 설정해 줍니다. 제목을 입력받기 위해서는 TextField라는 위젯을 사용합니다. TextField를 만들어 주신 후 테두리 선을 만들기 위해 decoration 속성에 InputDecoration을 사용해 줍니다. 그리고 그 안에..

이제 진짜로 메모앱을 만들어 보겠습니다. 우선 디자인적으로는 직접 마음대로 하셔도 되지만 저는 윈도우의 스티커 메모를 따라서 해보겠습니다. 제일 먼저 새로운 프로젝트를 만들어 보겠습니다. 프로젝트 이름은 sticky_memo로 해주고 스마트폰으로만 출시 할것이기때문에 안드로이드와 ios를 선택해줍니다. 안드로이드 언어와 ios 언어는 기본적으로 kotlin과 swift로 선택되어 있는데 여기서는 건드리지 않을것이기때문 각 플랫폼의 기본 언어인 java와 objective-c로 변경해 주겠습니다. 프로젝트를 생성한 후, android - app - build.gradle를 열어준 뒤 GradleException를 FileNotFoundException로 변경해줍니다. 전에 했던 기억을 되짚어보면 해당부분에..

이 내용은 CLASS 101+ 의 커니님이 강의하시는 용돈 벌어주는 나만의 앱 만들기 클래스를 보고 따라한 것입니다. 직접 강의를 보시고 하시면 더 쉽게 하실 수 있습니다. 우선 기본적인 메모앱을 만들어보기 위해서 세팅을 해봅시다. 안드로이드 스튜디오를 설치해 줍니다. 그 후 에뮬레이터를 Play Store 가 가능한 디바이스로 선택해서 설치를 해줍니다. 저는 pixel4를 선택했습니다. 그 후 자신이 원하는 안드로이드 버전을 선택해 줍니다. 저는 현재 최신 버전인 안드로이드 13을 선택했습니다. 설치가 끝난 후, 에뮬레이터를 실행한 뒤, 그대로 사용하셔도 좋지만 언어를 한글로 바꾸셔도 좋습니다. 저는 한글로 설정후 1순위로 바꿨습니다. 자 이제 기본 설정과 설치가 끝났으므로 새 프로젝트를 만들어 주겠습..

잠시 쉬던 Flutter와 개발을 다시 시작해 보려 합니다. 그러려면 일단 설치부터 시작 해야겠죠? 2021.09.07 - [개발/Flutter] - Flutter 기본 세팅 이전글을 참조해서 설치해 보겠습니다. 1. Flutter 설치를 해줍니다. https://flutter.dev/docs/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. flutter.dev 위 사이트에 접속한 후 Flutter를 다운로드 받아 줍니다. 2. zip 파일 다운로드 후 압축 해제한 파일을 c:\flutter 에 옮겨주고..

안드로이드 스튜디오는 Open JDK를 내장하고 있습니다. 따라서 별도의 자바 개발도구 (JDK; Java Development Kit)을 설치하지 않아도 됩니다. 그런데, 플러터 프로젝트에서 안드로이드 앱을 실행할 때 다음과 같은 오류가 발생하는 경우가 있습니다. ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. Please set the JAVA_HOME variable in your environment to match the location of your Java installation. 이는 플러터 개발 도구에서 안드로이드 스튜디오의 경로를 제대로 잡지 못했을 때 발생합니다. flutter doctor 명..

Flutter의 상태관리는 Bloc, Provider, riverpod, GetX등이 있다. 각각으 장단점이 있겠지만 모두 한번씩은 사용해 봐야 한다는 생각이 있으므로, 우선 riverpod을 사용해 보려 한다. riverpod 과 Provider의 개발자는 같다. Provider의 부족한 부분과 단점을 보완해서 만든게 riverpod이지만 아직 Provider만큼의 기능은 하지 못한다고 한다. 그렇지만 나는 사용해볼 것이다! (flutter_hooks와 함께 사용하면 좋음) 우선 새 프로젝트를 만들어 주고 pubspec.yaml에 flutter_riverpod: ^1.0.3 를 추가해준다. riverpod은 Provider를 제공하는데 그 중 자주 사용하는 3가지를 알아 보자. dependencies:..

코멘트 맨 아래로 자동 스크롤하는 방법 코멘트 창을 열어서 댓글을 달면 현재 보이는 상태에서 새로 생성되서 안 보이는 밑에 쌓이는 것을 볼 수 있다. 맨 밑인 최신으로 이동되지 않는데 이 부분을 수정을 해보자. statefulWidget에서 setState는 되지만 여기선 stateless이므로 할 수 있는 방법을 써보자. 우선 comment_screen에서 ListView.separated에 reverse옵션을 true로 해준다. 이렇게 실행하면 가장 최신이 위로 올라가게 되는데 코멘트를 불러오는 comment_network.repository로 가서 orderby부분의 descending를 true로 바꿔준 뒤 재실행하고 코멘트를 달면 방금 단 댓글이 보이는 것을 알 수 있다. 로그아웃을 깔끔하게! ..

create comment model 코멘트 레이아웃을 만들기 위해 코멘트 모델을 만들자. models - firestore 에 comment_model.dart를 생성해주고 다른 model을 복사해온다. 그리고 class명을 CommentModel로 바꿔준다. comment에 들어간 부분들은 String username; String userKey; String comment; DateTime commentTime; String commentKey; DocumentReference reference; 로 생성해주면 된다. 그리고 fromMap에는 username, userKey, comment, commentTime로 만들어 준다. fromSnapshot는 똑같이 두면 된다. 그리고 가장 하단의 메소드..